對于前端開發(fā)者來說手機端存在著很多的挑戰(zhàn)，手機端頁面開發(fā)過程中會碰到各種各樣千奇百怪的問題，那么今天我為大家分享手機端頁面開發(fā)過程中的一些問題和解決問題的方法技巧。
手機端頁面在不同設(shè)備、不同操作系統(tǒng)、不同運行環(huán)境下都可能造成各種各樣的沒有碰到過的的坑，相比曾經(jīng)的IE6來說，現(xiàn)在的問題要多了很多。
現(xiàn)在的前端開發(fā)者基本都要同時著手PC端頁面和手機頁面的開發(fā)工作，就目前的狀況來看，手機頁面的兼容性要比PC端更為復(fù)雜（當然主要是只在android端，大家懂的），而且有些樣式在PC端頁面上可能沒什么，但是一旦到了手機頁面，那就有可能是“大坑”，下面是本人自己開發(fā)手機頁面過程中總結(jié)的一些問題，在此借助鄭州seo公司老秦博客的平臺跟大家分享一下，避免以后再次去犯。
1、外觀
訪問者對網(wǎng)站的第一印象就是網(wǎng)頁的外觀，一個好的網(wǎng)頁外觀能帶給人絕妙的視覺效果，視覺效果好的頁面背景，可以為網(wǎng)站起到錦上添花的作用，還可能讓訪問者對網(wǎng)站留下深刻的印象（具體可查看鄭州seo公司老秦博客《手機端界面設(shè)計的8個優(yōu)化要點》的相關(guān)介紹）。
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、行為
關(guān)于行為方面，我這里主要跟大家分享一下事件無法被觸發(fā)和active效果不兼容的問題：
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)用
在開發(fā)面向現(xiàn)代智能手機的手機Web應(yīng)用的時候，無法避免一個事實，就是需要開發(fā)頁面應(yīng)用，對于不同的系統(tǒng)需求，頁面應(yīng)用的粒度會不同，可能是整個系統(tǒng)都使用一個頁面裝載，也可能是按模塊分為獨立頁面裝載，對此，我們也不妨來看一下在應(yīng)用過程中經(jī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選擇不一樣風格的音頻前后切換播放而不是同時播放，達到與預(yù)期接近的音頻效果。
D、不支持局部滾動
在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 樣式設(shè)置滾動條無效，這里有兩種解決方案：
①、巧用布局直接設(shè)置樣式滾動條在body(html)上，其他元素“錯覺滾動”。
②、利用iscroll、自寫js控制translate、scrollTop模擬。
4、系統(tǒng)/硬件
關(guān)于系統(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)定的方式書寫樣式可以減少一些不必要的麻煩。
5、代碼屬性的問題
在手機端頁面開發(fā)過程中，由于技術(shù)還不夠完善和穩(wěn)定，我們也經(jīng)常會因為代碼屬性的問題導(dǎo)致頁面出現(xiàn)很多千奇百怪的問題，這也是開發(fā)人員最為煩惱的問題，在此，鄭州seo公司老秦也分享幾個常見的問題：
（1）、overflow-x
這真的是一個大坑，一旦你在body或者html上用了這個屬性，對不起，如果你的頁面出現(xiàn)滾動條的話，那就會出現(xiàn)莫名其妙的bug，滑動頁面的時候fix在頂部或者底部的會擋住，不知道有人遇到這樣的情況沒有，我是遇到了，坑死了。
解決辦法：html跟body不要使用這個屬性，如果不想讓橫向出現(xiàn)滾動，就用overflow:hidden;overflow-y:auto;
（2）、calc()
這個本就是css3中的新方法，用起來其實是很爽的，無奈android不支持，大家最好別用，除非你不考慮android用戶。
（3）、display:fix
這個是css3的新屬性，用來做彈性布局的，ios上是十分OK的，然而android不支持，為了不被坑，別用。
（4）、-webkit-overflow-scrolling:touch
這個屬性不是坑，他是用來讓ios上的滾動條更加順滑流暢的，親測android上沒有啥大的變化，但是ios有，不算坑，為了增強用戶體驗，大家可以用上，給出現(xiàn)滾動條的標簽加上這個樣式。
（5）、jquery中的html()方法
如果input的type為tel類型，然后你用html()方法取出某個值填入這個input，這個input在android手機上會顯示諸如”<a href="faketel:****"></a>“類似的字符竄。
解決辦法就是用text()方法去取這個值然后填入這個input中，說白了還是html()跟text()方法的用法不一樣，html()方法取的是html的內(nèi)容，并非是純文本，而text()方法取出的是純文本，不會被瀏覽器解析，算是一個教訓(xùn)！
（6）、keyup和keydown在IOS設(shè)備上失效
如果你在IOS設(shè)備上用第三方輸入法是無法用keyup事件來監(jiān)聽的，因為ios系統(tǒng)做了屏蔽機制，第三方輸入法的事件系統(tǒng)是不管的，那么我們可以換種思路，去監(jiān)聽input的值變化事件，替換方案如下：
$('#input').bind('input propertychange', function() {
alert("....")
});
（7）、給body加position:relative
比如給手機頁面做個彈幕的效果，在body里面會有個div一直滾動，從右向左，然后這個div是absolulte的，那一定要給body加relative，否則ios的手機會出現(xiàn)橫向滾動條。
7、學會如何去解決問題
面對這么多坑，還有各種各樣已經(jīng)的和未知的坑，時間上也不可能一一講完，更不可能都已經(jīng)有解決方案，我們需要學會如何去解決這些問題。
解決坑首先自己需要有個強有力的執(zhí)行力，通過不斷去嘗試來探索未知的問題，那么一般我們會通過哪些方式哪些步驟和技巧來嘗試呢？
（1）、定位問題
首先我們需要定位問題，我們可以使用下列方法：
A、DOM隔離定位法
不斷由大范圍到小范圍隔離出DOM，從而找出、觸發(fā)問題的DOM元素。
B、樣式、JS剔除法
不斷剔除一些JS、CSS觀察調(diào)試檢查是否是由部分JS、CSS屬性引起問題。
C、多運行環(huán)境測試法
在多環(huán)境中測試，排查是否是由于特定環(huán)境引起（具體可查看鄭州seo公司老秦博客《手機端設(shè)備前端開發(fā)調(diào)試的方法技巧》的相關(guān)介紹）。
D、PC與手機聯(lián)合調(diào)試法
聯(lián)合PC與手機進行定位，如：通過Mac遠程調(diào)試iPhone/iPad。
（2）、解決問題的方式
我們解決問題可以嘗試如下的方式：
* 嘗試、轉(zhuǎn)思維、繞解決
* 優(yōu)雅降權(quán)、區(qū)分處理、溝通
* 搜索與提問……
和以下的思維：
* 替代
* 繞道
* 分割……
（3）、學會解決問題
在解決問題的過程中我們需要學會利用搜索和溝通資源解決問題：
A、google、百度
B、行業(yè)博客及社區(qū)
C、同事、朋友、QQ群、論壇等。
搜索引擎和行業(yè)博客及社區(qū)讓你更容易更精確的快速搜索出問題相關(guān)的資料，同時、朋友QQ群、論壇等讓你可以直接的跟人溝通出別人所遇到的問題及解決方案。
（4）、學會如何總結(jié)問題
在發(fā)現(xiàn)、解決問題后，更重要的是要學會如何總結(jié)問題：
A、總結(jié)記錄問題產(chǎn)生條件、解決方法和解決過程。
B、盡可能分析原理、產(chǎn)生的條件，避免重蹈覆轍。
C、分享給更多的人。
無窮無盡的坑，走的人多了，總結(jié)分享的多了，坑也就越來越平了。
我在總結(jié)記錄問題的同時，整理了一個手機端小貼士，記錄問題與一些坑，雖然目前還不完善但是希望能分享給更多的人也希望更多的人能參與完善。
鄭州seo公司老秦博客點評：
對于手機端網(wǎng)頁，用戶體驗始終是大問題，交互式使用好的客戶端可以在很多方面給用戶帶來不同的感覺和享受，因此，重視手機端的用戶體驗，就可以給客戶端增加很多意想不到的功能，這樣賦予這種軟件其他的不同凡響，漸漸的就能讓用戶越積越多，這樣才是交互功能一種好的體現(xiàn)。
版權(quán)聲明：本站部分文章，由 鄭州路普科技整理發(fā)表(信息來自互聯(lián)網(wǎng),不代表本站觀點)，如有冒犯請聯(lián)系我們
