移動端的那些坑

發表於2019-01-02

iOS Safari

Safari下使用border-image，不能設定border-color: transparent。
使用<meta name=”format-detection” content=”telephone=no” />解決連續數字誤識別為電話號碼導致樣式出錯的問題。
Safari的iframe會自動去適應內容大小而無視CSS中設定的width，該特性只能通過scrolling="no"屬性關閉，並通過設定如下CSS樣式設定width：width: 1px; min-width: 100%;；但是設定scrolling="no"會導致安卓下iframe無法滑動，目前只能通過UA裝置判斷解決。
Safari 10以下的flex佈局不認width和flex-basis，但是會認min-width，詳見Can I Use 中 flex 的 Known issue第一條。
在 Safari 中，setTimeout 無法觸發 focus 事件，且不支援 autofocus 屬性。可以使用Promise.resolve().then()來執行需要非同步的 focus 程式碼。
iOS 10 safari 會無視meta user-scalable=no，需要用e.preventDefault來解決。個人解決方案mobile-polyfill/ios10-user-scalable-no.js。建議結合ua-parser-js使用，因為iOS 10+的其他瀏覽器（QQ、UC）等都還是尊敬這個東西的。
Safari下開無痕瀏覽模式，操作localStorage會直接報錯，需要try catch。
某同學用unescape解析encodeURIComponent編碼的資訊，掉進了亂碼的坑。
type=search有坑。
position:fixed有坑。
部分版本的padStart/padEnd實現有bug，會出現null
http://www.joycesong.com/arch…
ios版本：11.1-11.3
使用swiper或者transform屬性時，有一定概率出現transform的元素以外的所有元素都消失，上下滑動一下頁面又出現了。
給外層元素加一個overflow:hidden屬性即可解決。
當使用-webkit-overflow-scrolling: touch;時，同時使用::-webkit-scrollbar偽類的display:none隱藏滾動條在iOS 11+出現失效的情況，需要使用如下方案解決，參考：https://stackoverflow.com/que…

#element::-webkit-scrollbar {
    background-color: transparent;
}
#element::-webkit-scrollbar-track {
    background-color: transparent;
}
#element::-webkit-scrollbar-thumb {
    background-color: transparent;
}

#element::-webkit-scrollbar {

background-color: transparent;

}

#element::-webkit-scrollbar-track {

background-color: transparent;

}

#element::-webkit-scrollbar-thumb {

background-color: transparent;

}

Andriod

針對部分瀏覽器非預期的快取機制，需要服務端新增如下HTTP頭資訊：

Cache-Control:no-cache, no-store, must-revalidate
Expires:0
Pragma:no-cache

Cache-Control:no-cache, no-store, must-revalidate

Expires:0

Pragma:no-cache

部分機型touchmove事件不連續觸發

Android的事件每次都要經過瀏覽器核心再發往UI執行緒，為了提高效率，如果瀏覽器核心中沒有設定preventDefault，Android就認為該頁面元素不需要touchmove事件，於是下次的事件就不經過核心，直接發往UI執行緒，於是js中就捕獲不到touchmove事件。

解決方案：在事件響應的地方設定preventDefault，這樣就可以源源不絕地接收到touch事件，比如在touchstart事件中執行e.preventDefault()，touchmove事件就會連續觸發。但是這種做法會取消掉瀏覽器其他的預設行為，比如頁面預設的滾動。。。

字號小於12px，或字號不是偶數，部分機型文字無法居中的問題

解決方案：使用transform: scale(0.5)進行縮放 or 字號大一點

scroll 相關方法相容問題

CSSOM 檢視模型新增了一些 scroll 相關的方法，參考：https://drafts.csswg.org/csso…

polyfill：https://github.com/iamdustan/…

綜合問題

禁止頁面滑動

當你需要禁止移動端頁面滑動的時候，在iOS下，需要禁止頁面中的touchmove事件，在安卓下，需要給html, body元素加上如下CSS：height:100%;overflow:hidden;。

推薦使用以下程式碼進行處理：

// scrollLock 視窗控制器，用於在彈層出現時禁止、消失時恢復螢幕的滑動
const scrollLock = (function () {
    let isLocked = false;

    function touchmoveHandler(e) {
        e.preventDefault();
    }

    function lock() {
        // 為 html、body元素設定 overflow:hidden height:100% 以限制滾動
        // https://gist.github.com/ufologist/ac1dfa6fa6192a5879e9d9dcdbd0bf54
        document.body.classList.add('sm-no-scroll');
        document.documentElement.classList.add('sm-no-scroll');
        // 限制頁面在iOS下的滑動
        document.addEventListener('touchmove', touchmoveHandler);
        isLocked = true;
    }

    function unlock() {
        document.body.classList.remove('sm-no-scroll');
        document.documentElement.classList.remove('sm-no-scroll');
        document.removeEventListener('touchmove', touchmoveHandler);
        isLocked = false;
    }

    return function (on) {
        if (arguments.length === 0) {
            if (isLocked) {
                unlock();
            }
            else {
                lock();
            }
        }
        else {
            if (on && !isLocked) {
                lock();
            }
            else if(!on && isLocked) {
                unlock();
            }
        }
    };
})();

// scrollLock 視窗控制器，用於在彈層出現時禁止、消失時恢復螢幕的滑動

const scrollLock = (function () {

let isLocked = false;

function touchmoveHandler(e) {

e.preventDefault();

}

function lock() {

// 為 html、body元素設定 overflow:hidden height:100% 以限制滾動

// https://gist.github.com/ufologist/ac1dfa6fa6192a5879e9d9dcdbd0bf54

document.body.classList.add('sm-no-scroll');

document.documentElement.classList.add('sm-no-scroll');

// 限制頁面在iOS下的滑動

document.addEventListener('touchmove', touchmoveHandler);

isLocked = true;

}

function unlock() {

document.body.classList.remove('sm-no-scroll');

document.documentElement.classList.remove('sm-no-scroll');

document.removeEventListener('touchmove', touchmoveHandler);

isLocked = false;

}

return function (on) {

if (arguments.length === 0) {

if (isLocked) {

unlock();

}

else {

lock();

}

else {

if (on && !isLocked) {

lock();

}

else if(!on && isLocked) {

unlock();

}

};

})();

.sm-no-scroll {
    height: 100%;
    overflow: hidden;
}

.sm-no-scroll {

height: 100%;

overflow: hidden;

}

但由於禁掉了touchmove事件，導致iOS下你希望滾動的部分也無法滾動了，因此對於希望滾動的部分，通過e.stopPropagation保留原有滾動效果，並針對回彈動畫的互動，建議使用如下程式碼宣告一個可滾動區域：

/* 以下屬性新增到滾動容器上 */
-webkit-overflow-scrolling: touch;
overflow: auto;

/* 以下屬性新增到滾動容器上 */

-webkit-overflow-scrolling: touch;

overflow: auto;

// el 為滾動容器
el.addEventListener('touchstart', function (e) {
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.lastY = e.targetTouches[0].pageY;
});

el.addEventListener('touchmove', function (e) {
    let up = (e.targetTouches[0].pageY > this.lastY);
    let down = !up;

    this.lastY = e.targetTouches[0].pageY;
    if ((up && this.allowUp) || (down && this.allowDown)) {
        e.stopPropagation();
    }
    else {
        e.preventDefault();
    }
});

// el 為滾動容器

el.addEventListener('touchstart', function (e) {

this.allowUp = (this.scrollTop > 0);

this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);

this.lastY = e.targetTouches[0].pageY;

});

el.addEventListener('touchmove', function (e) {

let up = (e.targetTouches[0].pageY > this.lastY);

let down = !up;

this.lastY = e.targetTouches[0].pageY;

if ((up && this.allowUp) || (down && this.allowDown)) {

e.stopPropagation();

}

else {

e.preventDefault();

}

});

被遮蔽的 class

有些瀏覽器或者外掛會通過DOM元素的class來識別是否為廣告，並隱藏或者直接刪除DOM。

mask
banner
fixed
sticky

點透

移動端的 click 觸發順序是touchstart->touchmove->touchend->mousedown->mousemove->mouseenter->click。

在重疊的區域裡，被遮蓋的元素繫結click，遮蓋的元素繫結touch事件，且touch後遮蓋的元素會隱藏的話，就會造成穿透，因為click是在touch之後延遲觸發的，瀏覽器會誤認為是在遮蓋的元素上觸發了click。

解決方案：fastclick or point-event:none。

參考連結

https://github.com/jtyjty9999…

移動端web整理移動端問題總結，移動web遇到的那些坑
2015-09-07
Web
移動端H5圖片上傳的那些坑
2016-08-02
H5
移動端踩坑合集
2017-08-10
iOS 移動端架構的那些事
2016-12-13
iOS架構
iOS移動端架構的那些事
2016-05-05
iOS架構
#兩年移動端踩坑，遇到的那些不得不說的bug及修復
2018-03-16
web移動端佈局的那些事兒
2019-03-03
Web
服務端介面中的那些坑
2016-12-21
服務端
移動端webview定位--爬坑經驗
2018-10-22
WebView
移動端 Web 開發踩坑之旅
2017-04-24
Web
移動端彈窗輸入密碼的那些事
2018-09-03
密碼
Web：移動端阻止預設行為的小坑
2022-02-08
Web
移動端使用tensorflow lite爬坑攻略
2018-08-21
移動端中踩過的關於日曆&時間的坑
2017-12-25
ios 設定啟動頁的那些坑
2016-10-21
iOS
圓桌會議：如何避免踩到移動研發中，效能提升那些坑
2021-12-21
HTML5 移動端自適應方案與踩坑
2019-03-13
HTML
騰訊 AlloyTeam：移動端輸入框填坑系列（一）
2017-05-09
移動端踩坑之旅-ios下fixed失效，軟鍵盤等
2017-10-18
iOS
iOS AVPlayer的那些坑
2017-12-28
iOS
CEF 中的那些坑
2013-07-25
需求文件（PRD）中那些互動設計的坑
2017-09-20
移動端的meta viewport
2017-05-08
View
vue移動端flexible.js結合Muse-ui使用的小坑
2017-11-27
VueFlexJSUI
Jquery那些坑
2017-05-01
jQuery
移動端定位
2018-11-29
iOS開發的那些坑
2019-03-04
iOS
Python裡的那些坑
2021-09-09
Python
再見，BLE的那些坑！
2018-12-24
Go語言的那些坑
2018-07-25
Go
Laravel裡的那些坑 - Optional
2020-08-30
Laravel
phalcon遇到的那些坑
2018-01-16
jcenter上傳的那些坑
2018-03-02
JavaScript 操作 DOM 的那些坑
2016-09-26
JavaScript
【原創】MYSQL 的那些“坑”
2017-08-20
MySql
使用WebDriver遇到的那些坑
2013-06-25
Web
坑！坑！坑！那些年運營犯過的錯誤
2015-08-03
【移動端開發】移動端開發基礎問題
2020-11-26

移動端的那些坑

iOS Safari

Andriod

綜合問題

禁止頁面滑動

被遮蔽的 class

點透

參考連結

相關文章