移動開發兼容問題

wangshijun 發布于2019-08-30 11:23 / 2282人閱讀

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

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/

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

GPU云服務器云服務器兼容問題兼容性問題 Js的兼容問題 html圖片兼容問題

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

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

移動端開發的兼容問題

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

wyk1184 2019-08-20 17:28 評論0 收藏0
移動端開發的兼容問題

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

weakish 2019-08-29 12:48 評論0 收藏0
移動端開發的兼容問題

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

songjz 2019-08-01 17:01 評論0 收藏0
Mac聯機調試移動端頁面方法和移動端IOS遇到的兼容性問題

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

CoreDump 2019-08-23 13:46 評論0 收藏0
從零搭建移動H5開發項目實戰

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

terro 2019-08-29 11:32 評論0 收藏0