建站
咨詢
售后
建站咨詢
新聞中心
對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)移動(dòng)端存在更多的挑戰(zhàn)，移動(dòng)端頁(yè)面開(kāi)發(fā)過(guò)程中會(huì)碰到各種各樣千奇百怪的問(wèn)題（我們俗稱BUG或坑），那么今天我為大家分享移動(dòng)端頁(yè)面開(kāi)發(fā)過(guò)程中的一些坑和排坑技巧。
我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、綏中ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的綏中網(wǎng)站制作公司
移動(dòng)端頁(yè)面在不同設(shè)備、不同操作系統(tǒng) 、不同運(yùn)行環(huán)境下都可能造成各種各樣的沒(méi)有碰到過(guò)的的坑，相比曾經(jīng)的IE6坑多了。下面先介紹一下4類具體常見(jiàn)的坑：
1、外觀
A、頁(yè)面高度渲染錯(cuò)誤
在各移動(dòng)端瀏覽器中經(jīng)常會(huì)出現(xiàn)這種頁(yè)面高度100%的渲染錯(cuò)誤，頁(yè)面低端和系統(tǒng)自帶的導(dǎo)航條重合了，高度的不正確我們需要重置修正它，通過(guò)javascript代碼重置掉：
- document.documentElement.style.height = window.innerHeight + 'px';
B、疊加區(qū)高亮
在部分android機(jī)型中點(diǎn)擊頁(yè)面某一塊區(qū)域可能會(huì)出現(xiàn)如圖所示的黃色框秒閃，這是部分機(jī)型系統(tǒng)自身的默認(rèn)定制樣式，給該元素一個(gè)CSS樣式重置掉：
- -webkit-tap-highlight-color:rgba(0,0,0,0);
2、行為
A、事件無(wú)法被觸發(fā)
在部分android機(jī)型的微信環(huán)境中會(huì)出現(xiàn)事件無(wú)法觸發(fā)、表單無(wú)法輸入的情況，我們針對(duì)需要輸入或者觸發(fā)事件的元素設(shè)置樣式：-webkit-transform: translate3d(0,0,0) ，不過(guò)新版本的微信已經(jīng)直接修復(fù)了該問(wèn)題。
B、:active 效果不兼容
在android 4.0版本以下CSS :active偽狀態(tài)效果無(wú)法兼容，我們給該元素的touch系列的事件（touchstart/touchend/touchmove）綁定一個(gè)空匿名方法:
- 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ù)寫(xiě)在了事件處理中導(dǎo)致小米手機(jī)中的微信崩潰，那么我們不要將解綁時(shí)間寫(xiě)在事件處理中即可。
B、預(yù)加載、自動(dòng)播放無(wú)效
如上表所示，經(jīng)過(guò)簡(jiǎn)單的測(cè)試發(fā)現(xiàn)預(yù)加載、自動(dòng)播放的有效性受操作系統(tǒng)、瀏覽器（webview）、版本等的影響，蘋果官方規(guī)定必須由用戶手動(dòng)觸發(fā)才會(huì)載入音頻，那么我們捕捉一次用戶輸入后，讓音頻加載實(shí)現(xiàn)預(yù)加載:
- //play and pause it once
- document.addEventListener('touchstart', function () {
- document.getElementsByTagName('audio')[0].play();
- document.getElementsByTagName('audio')[0].pause();
- });
C、無(wú)法同時(shí)播放多音頻
在android設(shè)備中,播放后一音頻會(huì)打斷前一音頻，而不會(huì)同步播放,這個(gè)是目前系統(tǒng)資深決定的，我們只有采取優(yōu)雅降權(quán)的方法讓android選擇不一樣風(fēng)格的音頻前后切換播放而不是同時(shí)播放，達(dá)到與預(yù)期接近的音頻效果。
D、不支持局部滾動(dòng)
在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 樣式設(shè)置滾動(dòng)條無(wú)效，這里有兩種解決方案:
1、巧用布局直接設(shè)置樣式滾動(dòng)條在body(html)上，其他元素“錯(cuò)覺(jué)滾動(dòng)”。
2、利用iscroll、自寫(xiě)js控制translate、scrollTop模擬。
4、系統(tǒng)/硬件
A、怪異懸浮的表單
在部分android 機(jī)型中的輸入框可能會(huì)出現(xiàn)如圖怪異的多余的浮出表單，經(jīng)過(guò)觀察與測(cè)試發(fā)現(xiàn)只有input:password類型的輸入框存在，那么我們只要使用input:text類型的輸入框并通過(guò)樣式-webkit-text-security: disc; 隱藏輸入密碼從而解決。
B、錯(cuò)誤出現(xiàn)滾動(dòng)條
在游戲內(nèi)嵌頁(yè)中出現(xiàn)了不應(yīng)該出現(xiàn)的滾動(dòng)條，而且內(nèi)容并沒(méi)有超出內(nèi)容區(qū)寬度，經(jīng)過(guò)測(cè)試overflow:hidden 無(wú)效，通過(guò)一系列嘗試使用古老的
寫(xiě)法解決，多嘗試一下不同的寫(xiě)法和屬性會(huì)有不一樣的驚喜哦！C、鏈接打開(kāi)系統(tǒng)瀏覽器
在游戲內(nèi)webview的部分android機(jī)型中可能會(huì)出現(xiàn)點(diǎn)擊鏈接調(diào)用系統(tǒng)瀏覽器的情況，這是一個(gè)非常不好的體驗(yàn)。那么我們嘗試給這個(gè)元素添加 target="_blank"' 屬性有可能解決，如果還不能解決那么需要修改IOS或android原生系統(tǒng)函數(shù)了。
D、Flex box 不兼容
在游戲內(nèi)嵌webview中碰到Flex box布局不兼容的情況，圖中所示下面部分的導(dǎo)航錯(cuò)位了，雖然之前有仔細(xì)查看過(guò)Flex box的兼容性，但是在游戲內(nèi)嵌頁(yè)中無(wú)法確定其調(diào)用的系統(tǒng)瀏覽器版本及兼容，所以導(dǎo)致錯(cuò)誤，所以我們寫(xiě)完整歷史版本呢的3種Flex box 解決。那么我們思考在寫(xiě)頁(yè)面過(guò)程中還是本著保守穩(wěn)定的方式書(shū)寫(xiě)樣式可以減少不不要的麻煩。
面對(duì)這么多坑，還有各種各樣已經(jīng)的和未知的坑，時(shí)間上也不可能一一講完，更不可能都已經(jīng)有解決方案,我們需要學(xué)會(huì)如何去解決坑:
解決坑首先自己需要有個(gè)強(qiáng)有力的執(zhí)行力，通過(guò)不斷去嘗試來(lái)探索未知的問(wèn)題，那么一般我們會(huì)通過(guò)哪些方式哪些步驟和技巧來(lái)嘗試呢？
1、首先我們需要定位問(wèn)題，我們可以使用下列方法：
A、DOM隔離定位法
不斷由大范圍到小范圍隔離出DOM，從而找出、觸發(fā)問(wèn)題的DOM元素
B、樣式、JS剔除法
不斷剔除一些JS、CSS觀察調(diào)試檢查是否是由部分JS、CSS屬性引起問(wèn)題
C、多運(yùn)行環(huán)境測(cè)試法
在多環(huán)境中測(cè)試，排查是否是由于特定環(huán)境引起
D、PC與手機(jī)聯(lián)合調(diào)試法
聯(lián)合PC與手機(jī)進(jìn)行定位，如：通過(guò)Mac遠(yuǎn)程調(diào)試iPhone/iPad
2、我們解決問(wèn)題可以嘗試如下的方式：
* 嘗試、轉(zhuǎn)思維、繞解決
* 優(yōu)雅降權(quán)、區(qū)分處理、溝通
* 搜索與提問(wèn)......
和以下的思維：
* 替代
* 繞道
* 分割......
3、在解決問(wèn)題的過(guò)程中我們需要學(xué)會(huì)利用搜索和溝通資源解決問(wèn)題：
A、google
B、stackoverflow
C、同事、朋友、QQ群、論壇等
Google和stackoverflow讓你更容易更精確的快速搜索出問(wèn)題相關(guān)的資料，同時(shí)、朋友QQ群、論壇等讓你可以直接的跟人溝通出別人所遇到的問(wèn)題及解決方案。
在發(fā)現(xiàn)、解決問(wèn)題后，更重要的是要學(xué)會(huì)如何總結(jié)問(wèn)題：
A、總結(jié)記錄問(wèn)題產(chǎn)生條件、解決方法和解決過(guò)程
B、盡可能分析原理、產(chǎn)生的條件，避免重蹈覆轍
C、分享給更多的人
無(wú)窮無(wú)盡的坑，走的人多了，總結(jié)分享的多了，坑也就越來(lái)越平了
我們?cè)诳偨Y(jié)記錄問(wèn)題的同時(shí)，整理了一個(gè)移動(dòng)端小貼士，記錄問(wèn)題與一些坑，雖然目前還不完善但是希望能分享給更多的人也希望更多的人能參與完善。
鏈接: https://github.com/tgideas/mtips
當(dāng)前文章：移動(dòng)前端：移動(dòng)端頁(yè)面坑與排坑技巧
當(dāng)前鏈接：http://www.dlmjj.cn/article/dphhiph.html
