亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

移動開發(fā)兼容問題

wangshijun / 2340人閱讀

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

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

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

解決辦法：

使用flex布局實現(xiàn)，有一個flex-shrink可使用

或者監(jiān)聽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失效

關(guān)于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/

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114963.html

相關(guān)文章

  • 移動端開發(fā)的兼容問題

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

    wyk1184 評論0 收藏0

  • 移動端開發(fā)的兼容問題

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

    weakish 評論0 收藏0

  • 移動端開發(fā)的兼容問題

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

    songjz 評論0 收藏0

  • Mac聯(lián)機調(diào)試移動端頁面方法 和 移動端IOS遇到的兼容性問題

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

    CoreDump 評論0 收藏0

  • 從零搭建移動H5開發(fā)項目實戰(zhàn)

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

    terro 評論0 收藏0

發(fā)表評論

0條評論

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