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

看見就非常 2015-04-23

展開全文

In 網(wǎng)頁重構(gòu) on 2014-12-08 20:21:19 by lyushine

對于前端開發(fā)者來說移動端存在更多的挑戰(zhàn)，移動端頁面開發(fā)過程中會碰到各種各樣千奇百怪的問題（我們俗稱BUG或坑），那么今天我為大家分享移動端頁面開發(fā)過程中的一些坑和排坑技巧。

移動端頁面在不同設(shè)備、不同操作系統(tǒng) 、不同運行環(huán)境下都可能造成各種各樣的沒有碰到過的的坑，相比曾經(jīng)的IE6坑多了。下面先介紹一下4類具體常見的坑：

1、外觀

A、頁面高度渲染錯誤

在各移動端瀏覽器中經(jīng)常會出現(xiàn)這種頁面高度100%的渲染錯誤，頁面低端和系統(tǒng)自帶的導(dǎo)航條重合了，高度的不正確我們需要重置修正它，通過javascript代碼重置掉：

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

B、疊加區(qū)高亮

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

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

2、行為

A、事件無法被觸發(fā)

在部分android機型的微信環(huán)境中會出現(xiàn)事件無法觸發(fā)、表單無法輸入的情況，我們針對需要輸入或者觸發(fā)事件的元素設(shè)置樣式：-webkit-transform: translate3d(0,0,0) ，不過新版本的微信已經(jīng)直接修復(fù)了該問題。

B、:active 效果不兼容

在android 4.0版本以下CSS :active偽狀態(tài)效果無法兼容，我們給該元素的touch系列的事件（touchstart/touchend/touchmove）綁定一個空匿名方法:

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

3、應(yīng)用

A、瀏覽器崩潰

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

解綁函數(shù)寫在了事件處理中導(dǎo)致小米手機中的微信崩潰，那么我們不要將解綁時間寫在事件處理中即可。

B、預(yù)加載、自動播放無效

如上表所示，經(jīng)過簡單的測試發(fā)現(xiàn)預(yù)加載、自動播放的有效性受操作系統(tǒng)、瀏覽器（webview）、版本等的影響，蘋果官方規(guī)定必須由用戶手動觸發(fā)才會載入音頻，那么我們捕捉一次用戶輸入后，讓音頻加載實現(xiàn)預(yù)加載:

//play and pause it once

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

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

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

});

C、無法同時播放多音頻

在android設(shè)備中,播放后一音頻會打斷前一音頻，而不會同步播放,這個是目前系統(tǒng)資深決定的，我們只有采取優(yōu)雅降權(quán)的方法讓android選擇不一樣風(fēng)格的音頻前后切換播放而不是同時播放，達到與預(yù)期接近的音頻效果。

D、不支持局部滾動

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

1、巧用布局直接設(shè)置樣式滾動條在body(html)上，其他元素“錯覺滾動”。

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

4、系統(tǒng)/硬件

A、怪異懸浮的表單

在部分android 機型中的輸入框可能會出現(xiàn)如圖怪異的多余的浮出表單，經(jīng)過觀察與測試發(fā)現(xiàn)只有input:password類型的輸入框存在，那么我們只要使用input:text類型的輸入框并通過樣式-webkit-text-security: disc; 隱藏輸入密碼從而解決。

B、錯誤出現(xiàn)滾動條

在游戲內(nèi)嵌頁中出現(xiàn)了不應(yīng)該出現(xiàn)的滾動條，而且內(nèi)容并沒有超出內(nèi)容區(qū)寬度，經(jīng)過測試overflow:hidden 無效，通過一系列嘗試使用古老的 <body scroll="no"> 寫法解決，多嘗試一下不同的寫法和屬性會有不一樣的驚喜哦！

C、鏈接打開系統(tǒng)瀏覽器

在游戲內(nèi)webview的部分android機型中可能會出現(xiàn)點擊鏈接調(diào)用系統(tǒng)瀏覽器的情況，這是一個非常不好的體驗。那么我們嘗試給這個元素添加 target="_blank"' 屬性有可能解決，如果還不能解決那么需要修改IOS或android原生系統(tǒng)函數(shù)了。

D、Flex box 不兼容

在游戲內(nèi)嵌webview中碰到Flex box布局不兼容的情況，圖中所示下面部分的導(dǎo)航錯位了，雖然之前有仔細查看過Flex box的兼容性，但是在游戲內(nèi)嵌頁中無法確定其調(diào)用的系統(tǒng)瀏覽器版本及兼容，所以導(dǎo)致錯誤，所以我們寫完整歷史版本呢的3種Flex box 解決。那么我們思考在寫頁面過程中還是本著保守穩(wěn)定的方式書寫樣式可以減少不不要的麻煩。

面對這么多坑，還有各種各樣已經(jīng)的和未知的坑，時間上也不可能一一講完，更不可能都已經(jīng)有解決方案,我們需要學(xué)會如何去解決坑:

解決坑首先自己需要有個強有力的執(zhí)行力，通過不斷去嘗試來探索未知的問題，那么一般我們會通過哪些方式哪些步驟和技巧來嘗試呢？

1、首先我們需要定位問題，我們可以使用下列方法：

A、DOM隔離定位法

不斷由大范圍到小范圍隔離出DOM，從而找出、觸發(fā)問題的DOM元素

B、樣式、JS剔除法

不斷剔除一些JS、CSS觀察調(diào)試檢查是否是由部分JS、CSS屬性引起問題

C、多運行環(huán)境測試法

在多環(huán)境中測試，排查是否是由于特定環(huán)境引起

D、PC與手機聯(lián)合調(diào)試法

聯(lián)合PC與手機進行定位，如：通過Mac遠程調(diào)試iPhone/iPad

2、我們解決問題可以嘗試如下的方式：