移動前端系列——移動端頁面坑與排坑技巧

時間 2019-11-11

標籤移動前端系列頁面技巧欄目無線简体版

原文原文鏈接

移動前端系列——移動端頁面坑與排坑技巧

: In 網頁重構; on 2014-12-08 20:21:19; by lyushine

對於前端開發者來講移動端存在更多的挑戰，移動端頁面開發過程當中會碰到各類各樣千奇百怪的問題（咱們俗稱BUG或坑），那麼今天我爲你們分享移動端頁面開發過程當中的一些坑和排坑技巧。javascript

移動端頁面在不一樣設備、不一樣操做系統、不一樣運行環境下均可能形成各類各樣的沒有碰到過的的坑，相比曾經的IE6坑多了。下面先介紹一下4類具體常見的坑：html

一、外觀

A、頁面高度渲染錯誤

在各移動端瀏覽器中常常會出現這種頁面高度100%的渲染錯誤，頁面低端和系統自帶的導航條重合了，高度的不正確咱們須要重置修正它，經過javascript代碼重置掉：前端

document.documentElement.style.height = window.innerHeight + 'px';

B、疊加區高亮

在部分android機型中點擊頁面某一塊區域可能會出現如圖所示的黃色框秒閃，這是部分機型系統自身的默認定製樣式，給該元素一個CSS樣式重置掉：java

-webkit-tap-highlight-color:rgba(0,0,0,0);

二、行爲

A、事件沒法被觸發

在部分android機型的微信環境中會出現事件沒法觸發、表單沒法輸入的狀況，咱們針對須要輸入或者觸發事件的元素設置樣式：-webkit-transform: translate3d(0,0,0) ，不過新版本的微信已經直接修復了該問題。android

B、:active 效果不兼容

在android 4.0版本如下CSS :active僞狀態效果沒法兼容，咱們給該元素的touch系列的事件（touchstart/touchend/touchmove）綁定一個空匿名方法:ios

var element=document.getElementsById(」btnShare」);
element.addEventListener(‘touchstart’,function(){},false);

三、應用

A、瀏覽器崩潰

var act = function(){
	window.removeEventListener('devicemotion',act);
};
window.addEventListener('devicemotion',act,false);

解綁函數寫在了事件處理中致使小米手機中的微信崩潰，那麼咱們不要將解綁時間寫在事件處理中便可。web

B、預加載、自動播放無效

如上表所示，通過簡單的測試發現預加載、自動播放的有效性受操做系統、瀏覽器（webview）、版本等的影響，蘋果官方規定必須由用戶手動觸發纔會載入音頻，那麼咱們捕捉一次用戶輸入後，讓音頻加載實現預加載:瀏覽器

//play and pause it once

document.addEventListener('touchstart', function () {

 document.getElementsByTagName('audio')[0].play();

 document.getElementsByTagName('audio')[0].pause();

});

C、沒法同時播放多音頻

在android設備中,播放後一音頻會打斷前一音頻，而不會同步播放,這個是目前系統資深決定的，咱們只有採起優雅降權的方法讓android選擇不同風格的音頻先後切換播放而不是同時播放，達到與預期接近的音頻效果。微信

D、不支持局部滾動

在android 4.0版本如下在body(html)元素以外的元素 overflow:scroll 樣式設置滾動條無效，這裏有兩種解決方案:iphone

一、巧用佈局直接設置樣式滾動條在body(html)上，其餘元素「錯覺滾動」。

二、利用iscroll、自寫js控制translate、scrollTop模擬

四、系統/硬件

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 解決。那麼咱們思考在寫頁面過程當中仍是本着保守穩定的方式書寫樣式能夠減小不不要的麻煩。

面對這麼多坑，還有各類各樣已經的和未知的坑，時間上也不可能一一講完，更不可能都已經有解決方案,咱們須要學會如何去解決坑:

解決坑首先本身須要有個強有力的執行力，經過不斷去嘗試來探索未知的問題，那麼通常咱們會經過哪些方式哪些步驟和技巧來嘗試呢？

一、首先咱們須要定位問題，咱們可使用下列方法：

A、DOM隔離定位法

不斷由大範圍到小範圍隔離出DOM，從而找出、觸發問題的DOM元素

B、樣式、JS剔除法

不斷剔除一些JS、CSS觀察調試檢查是不是由部分JS、CSS屬性引發問題

C、多運行環境測試法

在多環境中測試，排查是不是因爲特定環境引發

D、PC與手機聯合調試法

聯合PC與手機進行定位，如：經過Mac遠程調試iPhone/iPad

二、咱們解決問題能夠嘗試以下的方式：