移動端css兼容問題

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

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

解決辦法：

1. 使用flex佈局實現，有一個flex-shrink可以使用
2. 或者監聽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

<div class="item">
    <div class="name">驗證碼</div>
    <input class="jInput input" type="number" pattern="[0-9]*" placeholder="請輸入短信驗證碼">
    <button class="btn jSendVcodeBtn">
        發送驗證碼
    </button>
</div>

複製代碼

.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.瀏覽器對像素 四捨五入的問題

參考 web.jobbole.com/84113/

瀏覽器會對小數點進行四捨五入，實際渲染是四捨五入以後的，可是真實佔用空間是原始大小，四捨五入的那部分值會影響下一個