標籤：
對於前端開發人員來說移動端存在更多的挑戰，移動端頁面開發過程中會碰到各種各樣千奇百怪的問題（我們俗稱BUG或坑），那麼今天我為大家分享移動端頁面開發過程中的一些坑和排坑技巧。
移動端頁面在不同裝置、不同作業系統 、不同運行環境下都可能造成各種各樣的沒有碰到過的的坑，相比曾經的IE6坑多了。下面先介紹一下4類具體常見的坑：
1、外觀 A、頁面高度渲染錯誤
在各移動端瀏覽器中經常會出現這種頁面高度100%的渲染錯誤，頁面低端和系統內建的導航條重合了，高度的不正確我們需要重設修正它，通過javascript代碼重設掉：
document.documentElement.style.height = window.innerHeight + ‘px‘;B、疊加區高亮
在部分android機型中點擊頁面某一塊地區可能會出現的黃色框秒閃，這是部分機型系統自身的預設定製樣式，給該元素一個CSS樣式重設掉：
-webkit-tap-highlight-color:rgba(0,0,0,0);2、行為 A、事件無法被觸發
在部分android機型的環境中會出現事件無法觸發、表單無法輸入的情況，我們針對需要輸入或者觸發事件的元素設定樣式：-webkit-transform: translate3d(0,0,0) ，不過新版本的已經直接修複了該問題。
B、:active 效果不相容
在android 4.0版本以下CSS :active偽狀態效果無法相容，我們給該元素的touch系列的事件（touchstart/touchend/touchmove）綁定一個空匿名方法:
var element=document.getElementsById(”btnShare”);3、應用 A、瀏覽器崩潰
element.addEventListener(‘touchstart’,function(){},false);
var act = function(){
window.removeEventListener(‘devicemotion‘,act);
};
window.addEventListener(‘devicemotion‘,act,false);
解除綁定函數寫在了事件處理中導致小米手機中的崩潰，那麼我們不要將解除綁定時間寫在事件處理中即可。
B、預先載入、自動播放無效
如上表所示，經過簡單的測試發現預先載入、自動播放的有效性受作業系統、瀏覽器（webview）、版本等的影響，蘋果官方規定必須由使用者手動觸發才會載入音頻，那麼我們捕捉一次使用者輸入後，讓音頻載入實現預先載入:
//play and pause it onceC、無法同時播放多音頻
document.addEventListener(‘touchstart‘, function () {
document.getElementsByTagName(‘audio‘)[0].play();
document.getElementsByTagName(‘audio‘)[0].pause();
});
在android裝置中,播放後一音頻會打斷前一音頻，而不會同步播放,這個是目前系統資深決定的，我們只有採取優雅降權的方法讓android選擇不一樣風格的音頻前後切換播放而不是同時播放，達到與預期接近的音頻效果。
D、不支援局部滾動
在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 樣式設定捲軸無效，這裡有兩種解決方案:
1、巧用布局直接設定樣式捲軸在body(html)上，其他元素“錯覺滾動”。
2、利用iscroll、自寫js控制translate、scrollTop類比
4、系統/硬體 A、怪異懸浮的表單
在部分android 機型中的輸入框可能會出現怪異的多餘的浮出表單，經過觀察與測試發現只有input:password類型的輸入框存在，那麼我們只要使用input:text類型的輸入框並通過樣式-webkit-text-security: disc; 隱藏輸入密碼從而解決。
B、錯誤出現捲軸
在遊戲內嵌頁中出現了不應該出現的捲軸，而且內容並沒有超出內容區寬度，經過測試overflow:hidden 無效，通過一系列嘗試使用古老的 <body scroll="no"> 寫法解決，多嘗試一下不同的寫法和屬性會有不一樣的驚喜哦！
C、連結開啟系統瀏覽器
在遊戲內webview的部分android機型中可能會出現點選連結調用系統瀏覽器的情況，這是一個非常不好的體驗。那麼我們嘗試給這個元素添加 target="_blank"‘ 屬性有可能解決，如果還不能解決那麼需要修改IOS或android原生系統函數了。
D、Flex box 不相容
在遊戲內嵌webview中碰到Flex box布局不相容的情況，圖中所示下面部分的導航錯位了，雖然之前有仔細查看過Flex box的相容性，但是在遊戲內嵌頁中無法確定其調用的系統瀏覽器版本及相容，所以導致錯誤，所以我們寫完整曆史版本呢的3種Flex box 解決。那麼我們思考在寫頁面過程中還是本著保守穩定的方式書寫樣式可以減少不不要的麻煩。
面對這麼多坑，還有各種各樣已經的和未知的坑，時間上也不可能一一講完，更不可能都已經有解決方案,我們需要學會如何去解決坑:
解決坑首先自己需要有個強有力的執行力，通過不斷去嘗試來探索未知的問題，那麼一般我們會通過哪些方式哪些步驟和技巧來嘗試呢？
1、首先我們需要定位問題，我們可以使用下列方法：
A、DOM隔離定位法
不斷由大範圍到小範圍隔離出DOM，從而找出、觸發問題的DOM元素
B、樣式、JS剔除法
不斷剔除一些JS、CSS觀察調試檢查是否是由部分JS、CSS屬性引起問題
C、多運行環境測試法
在多環境中測試，排查是否是由於特定環境引起
D、PC與手機聯合調試法
聯合PC與手機進行定位，如：通過Mac遠端偵錯iPhone/iPad
2、我們解決問題可以嘗試如下的方式：
* 嘗試、轉思維、繞解決
* 優雅降權、區分處理、溝通
* 搜尋與提問......
和以下的思維：
* 替代
* 繞道
* 分割......
3、在解決問題的過程中我們需要學會利用搜尋和溝通資源解決問題：
A、google
B、stackoverflow
C、同事、朋友、QQ群、論壇等
Google和stackoverflow讓你更容易更精確的快速搜尋出問題相關的資料，同時、朋友QQ群、論壇等讓你可以直接的跟人溝通出別人所遇到的問題及解決方案。
在發現、解決問題後，更重要的是要學會如何總結問題：
A、總結記錄問題產生條件、解決方案和解決過程
B、儘可能分析原理、產生的條件，避免重蹈覆轍
C、分享給更多的人
無窮無盡的坑，走的人多了，總結分享的多了，坑也就越來越平了
我們在總結記錄問題的同時，整理了一個移動端小貼士，記錄問題與一些坑，雖然目前還不完善但是希望能分享給更多的人也希望更多的人能參與完善。
移動前端系列——移動端頁面坑與排坑技巧
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
