來自艾瑞的《2014年中國移動互聯(lián)網(wǎng)行業(yè)年度研究報告》向我們展示著在未來的互聯(lián)網(wǎng)世界，移動端將成為主要戰(zhàn)場，若想在浪潮洶涌中屹立不倒，我們就要開始移動端，開始一個新的征程。

作為一名前端工程師，我們享受過或仍在享受著pc端各種”非現(xiàn)代”瀏覽器的”折磨”，面對移動端我們又將面臨哪些兼容性的考驗呢？篇幅所限本文將向各位展示我們在移動端開發(fā)過程中針對兼容性問題的一點經(jīng)驗，主要包括方案選型及入門基礎，如果您是大牛、大神或是大神牛歡迎指點、指正，如果您是和我一樣的移動端新鳥歡迎探討共同學習。

在移動端的兼容性上主要需要關注哪些方面的問題，對其又是如何定級的呢。由于要考慮設備（pc設備or移動設備）、廠商、機型、操作系統(tǒng)及版本、瀏覽器及版本等多方面因素，移動端兼容性被毫不夸張得稱為”后IE6時代”。如何在成本允許的情況下將頁面更好地呈現(xiàn)給用戶，讓我們先來看一組數(shù)據(jù)：

由圖可見，智能手機占據(jù)了常用移動設備終端95.2%的份額，而智能手機中安卓及IOS兩大平臺占比總和達到了89%，綜合成本、效率及整體效果考慮，我們暫且將移動端瀏覽器的兼容性定級為：兼容IOS和安卓平臺的主流機型、系統(tǒng)及瀏覽器。

目前針對跨終端的方案，主要分為兩大陣營：一套資源Vs兩套資源。第一種是通過響應式或頁面終端判斷去實現(xiàn)一套資源適配所有終端；第二種是通過終端判斷分別調(diào)取兩套資源以適配所有終端。這兩種思路我們并不能斬釘截鐵的說哪一個更優(yōu)選，正所謂”合適的才是最好的”。下面來對這兩種思路進行簡單的對比：

思路一:通過響應式或頁面終端判斷去實現(xiàn)一套資源適配所有終端

優(yōu)勢：只需維護一套資源，維護成本較低。

劣勢：需加載適配各個終端的各個資源，在不同終端通過響應式布局實現(xiàn)不同展現(xiàn)，部分交互效果需要在頁面中做終端判斷，代價較大，若圖片資源為一套，部分圖片在超高分辨率設備（例如iphone系列）下會失真，且在非wifi情況下即使加了延時加載也易出現(xiàn)加載慢的情況。

技術(shù)選型：jquery（或原生js等）+ 響應式 + 前端模塊加載器（seajs或RequireJS等）+ css預處理器（sass 或less等）。jquery較好的兼容性配合響應式可相對代價較小地實現(xiàn)跨終端。前端模塊加載器主要負責按需加載，以提高頁面加載速度，css預處理器的變量、運算、嵌套等特性可大大提高手動計算響應式的效率，媽媽再也不用擔心我把比例算錯了。當然后兩者可參考需求及成本決定是否采用。

思路二:通過終端判斷分別調(diào)取兩套資源以適配所有終端

優(yōu)勢：可根據(jù)不同端做個性設計及個性化信息推送且可按需加載，如移動端可配合重力感應、不同手勢做各種炫酷拽效果，pc頁面可不受流量限制做適合pc端的效果。

劣勢：需維護兩套資源，維護成本增加。

技術(shù)選型：zepto（或xui等移動端輕量級框架）+ 響應式 + 前端模塊加載器 + css預處理器 + 終端適配。zepto作為jquery的移動端版本，依然延續(xù)其自身優(yōu)勢，大幅優(yōu)化了移動端API且摒棄了兼容”非現(xiàn)代瀏覽器”的冗余代碼，成為移動端輕便可用的js框架代表，對于習慣了jquery的同學來說簡直是不二之選！

終端適配目前一般通過ua判斷來實現(xiàn)。ua判斷可放在服務端也可放在頁面中，在代理服務器中做跳轉(zhuǎn)更快、更準確且不走應用程序?qū)?，即使瀏覽器禁用了js依然可以跳轉(zhuǎn)到相應的地址，同時秉承著公共服務放在服務端這樣的云端服務理念，我們選擇了通過代理服務器做終端適配。

User-Agent嗅探，即Web瀏覽器發(fā)送一個Web頁面或資源請求時，會發(fā)送一個User-Agent首部作為HTTP請求的一部分，那么我們就可以在服務器端獲取想要的信息，進而判斷并引導用戶到達相應的頁面地址。

下面我們通過詳細分析一個http請求中的user-agent首部來了解其原理：

要點明晰及注意事項：

css像素與設備像素：二者的區(qū)別在于前者是抽象的，用于瀏覽器渲染頁面，而后者是設備的最小物理單位?？蓞⒖糀 pixel is not a pixel is not a pixel進行理解。

視口：移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區(qū)別在于前者為基于移動設備屏幕的實際寬度，而后者為我們?yōu)轫撁娑x的用于瀏覽器渲染的大小。 可參考A tale of two viewports進行理解。

媒體查詢：找準斷點。

響應式布局：當上下文環(huán)境發(fā)生變化時可考慮變化布局來展現(xiàn)優(yōu)雅。當元素脫離文檔流絕對定位時，才是相對高度定義的。

響應式字體：font-face絕對會對你的站產(chǎn)生巨大的影響。當容器中定義字體單位為em時要注意繼承性，例如：當我們定義某個塊級元素的”font-size：1.5em; line-height: 2em;”時，line-height的實際行高為1.5em*2即3em。

文檔聲明：文檔聲明建議用html5的：，它指示瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。同時需要定義文檔的視口信息，如：width=device-width告訴瀏覽器渲染該頁面的寬度等于設備寬度，initial-scale=1告訴瀏覽器初始化縮放的比例1:1，user-scalable=no禁止用戶縮放頁面。

兼容性測試:

調(diào)試工具推薦chrome的模擬器加真機測試，更多關于debug的工具可以參考Debugging Mobile Web Page這篇文章。

總結(jié)：

移動端開啟了一個時代，它不是虛無縹緲或者高不可攀的，它反而讓曾經(jīng)被忽視的渲染方式及web標準等實質(zhì)性的問題更加清晰，相較上述兩種思路，我們更傾向于各司其職思路清晰的第二種方案，我們可根據(jù)不同終端做不同的交互設計、視覺設計，研究不同的前端技術(shù)、用戶體驗，適合的才是更好的。做為前端工程師，讓我們理解原理，探索實踐，跨終端任重而道遠。

關于暢游VC

搜狐暢游視覺設計中心團隊。我們是從游戲和生活中汲取創(chuàng)意和靈感的一群設計精靈，用愛去釋放奇妙的設計魔法，描繪讓你我感動的虛擬人生。

網(wǎng)頁名稱：漲姿勢時間！你應該了解的“移動端兼容性”
網(wǎng)頁地址：http://www.rwnh.cn/news/173742.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、外貿(mào)建站、網(wǎng)站設計、網(wǎng)站內(nèi)鏈、電子商務、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)