移動(dòng)開(kāi)發(fā)兼容問(wèn)題

elliott_hu 發(fā)布于2019-08-23 18:39 / 1467人閱讀

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

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

如果絕對(duì)定位的元素在最下面，鍵盤(pán)彈起時(shí)，絕對(duì)定位元素會(huì)在鍵盤(pán)上面

解決辦法：

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

或者監(jiān)聽(tīng)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設(shè)置flex:1之后，將兄弟元素?cái)D出了父元素空間

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


    驗(yàn)證碼

.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; // 需要加一個(gè)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屬性失效的原因，父元素沒(méi)有設(shè)置高度，子元素top使用百分比的時(shí)候沒(méi)有參照，此時(shí)可以使用px值

4.滾動(dòng)穿透問(wèn)題

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

body.no-scroll {
  position: fixed;
  width: 100%;
}

UtilFn.ModalHelper = function (bodyCls) {
    var scrollTop;
    var scrollingElement = document.scrollingElement || document.body; // 此寫(xiě)法兼容webkit，獲取頁(yè)面滾動(dòng)元素
    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.瀏覽器對(duì)像素四舍五入的問(wèn)題

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

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