国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動開發兼容問題

elliott_hu / 1455人閱讀

摘要：安卓使用絕對定位布局與原生有沖突如果絕對定位的元素在最下面，鍵盤彈起時，絕對定位元素會在鍵盤上面解決辦法使用布局實現，有一個可使用或者監聽事件，將元素隱藏低版本瀏覽器，給設置之后，將兄弟元素擠出了父元素空間具體原因待查，反正需要給加一個驗

1.安卓使用絕對定位布局與原生input有沖突

如果絕對定位的元素在最下面，鍵盤彈起時，絕對定位元素會在鍵盤上面

解決辦法：

使用flex布局實現，有一個flex-shrink可使用

或者監聽resize事件，將元素隱藏

export function adapterPosition(selector) {
    if (/iphone/i.test(navigator.userAgent)) return
    const h = window.innerHeight;
    const dom = document.querySelector(selector)
    if (!dom) return
    const display = dom.style.display
    window.addEventListener("resize", () => {
        const height = window.innerHeight
        if (height < h) {
            dom.style.display = "none"
        } else {
            dom.style.display = display
        }
    });
}
2.低版本瀏覽器，給input設置flex:1之后，將兄弟元素擠出了父元素空間

具體原因待查，反正需要給input加一個display:block


    
驗證碼

    
    



.item {
    margin-left: 15px;
    box-sizing: border-box;
    height: 60px;
    padding: 12px 15px 12px 0;
    overflow: hidden;
    background-color: #fff;
    color: #212121;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-bottom: 1px solid #f4f4f4;
    font-size: 16px;
}

.item .name {
    margin-right: 10px;
    min-width: 48px;
}

.item .input {
    display: block; // 需要加一個display：block
    outline: 0 none;
    -webkit-box-flex: 1;
    flex: 1;
    font-size: 16px;
    padding: 0;
    border-width: 0;
    box-shadow: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
3.relative top失效

關于relative元素top屬性失效的原因，父元素沒有設置高度，子元素top使用百分比的時候沒有參照，此時可以使用px值

4.滾動穿透問題

描述：有場景需要mask，但是背景還是可以滾動，即滾動穿透，解決方案如下，主要是獲取頁面的滾動元素并設置其為fixed

body.no-scroll {
  position: fixed;
  width: 100%;
}
UtilFn.ModalHelper = function (bodyCls) {
    var scrollTop;
    var scrollingElement = document.scrollingElement || document.body; // 此寫法兼容webkit，獲取頁面滾動元素
    return {
        afterOpen: function () {
            scrollTop = scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + "px";
        },
        beforeClose: function () {
            document.body.classList.remove(bodyCls);
            scrollingElement.scrollTop = scrollTop;
        }
    };
}
5.瀏覽器對像素 四舍五入的問題

參考 http://web.jobbole.com/84113/

瀏覽器會對小數點進行四舍五入，實際渲染是四舍五入之后的，但是真實占用空間是原始大小，四舍五入的那部分值會影響下一個

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105602.html

相關文章

  • 移動端開發的兼容問題

    摘要：移動端開發的兼容問題文章已同步我的筆記，歡迎大家加，加后人生更加美好下為屬性設置會出現樣式文字和背景異常問題。解決方案可以使用整體放大屏幕的倍等等再使用縮放使用在移動端會模糊也需要這樣的解決方案在移動端圖片上傳圖片兼容低端機的問題。 移動端開發的兼容問題 文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后人生...

    wyk1184 評論0 收藏0

  • 移動端開發的兼容問題

    摘要：移動端開發的兼容問題文章已同步我的筆記，歡迎大家加，加后人生更加美好下為屬性設置會出現樣式文字和背景異常問題。解決方案可以使用整體放大屏幕的倍等等再使用縮放使用在移動端會模糊也需要這樣的解決方案在移動端圖片上傳圖片兼容低端機的問題。 移動端開發的兼容問題 文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后人生...

    weakish 評論0 收藏0

  • 移動端開發的兼容問題

    摘要：移動端開發的兼容問題文章已同步我的筆記，歡迎大家加，加后人生更加美好下為屬性設置會出現樣式文字和背景異常問題。解決方案可以使用整體放大屏幕的倍等等再使用縮放使用在移動端會模糊也需要這樣的解決方案在移動端圖片上傳圖片兼容低端機的問題。 移動端開發的兼容問題 文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后人生...

    songjz 評論0 收藏0

  • Mac聯機調試移動端頁面方法 和 移動端IOS遇到的兼容性問題

    摘要：移動端失效需求點擊一個，讓某一個聚焦并彈出虛擬鍵盤。安卓可以聚焦，但是不會彈出虛擬鍵盤說明安卓機的表現也是異常的無法聚焦，也不會彈出虛擬鍵盤所以我的這邊的實踐結論是，如果希望在頁面初始化過程中，讓自動聚焦并彈出虛擬鍵盤。 移動端IOS遇到的兼容性問題 和 Mac聯機調試方法 有時候遇到一些移動端「疑難雜癥」，因為移動端不方便調試，可能找不到問題點，所以經常需要電腦端和移動端聯機調試，...

    CoreDump 評論0 收藏0

  • 從零搭建移動H5開發項目實戰

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。 從零搭建移動H5開發項目實戰 前端H5的前世今身 在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

    terro 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<