標籤：快速 響應式 視覺設計 媒體查詢 大牛 lin 伺服器 輕量 上下文
“移動網民的規模將在2013年底達到5.0億，增速為19.1%。預計到2017年，移動網民將趕超PC網民，成為互連網的第一大使用者群體，移動端將成為網民最主要的上網渠道。互連網的加速滲透和全民移動互聯有望在下一個5年實現。在過去的幾年時間裡，移動智慧型裝置快速普及，配置迅速提升，許多過去在PC端才能完成的需求都轉移到了移動端，導致PC端流量也逐漸向移動端轉移。未來幾年許多互連網產品移動端的流量即將超過PC端，整個互連網的使用情境產生巨大變遷。”
——《2014年中國移動互連網行業年度研究報告》 來自艾瑞的《2014年中國移動互連網行業年度研究報告》向我們展示著在未來的互連網世界，移動端將成為主要戰場，若想在浪潮洶湧中屹立不倒，我們就要開始移動端，開始一個新的征程。 作為一名前端工程師，我們享受過或仍在享受著pc端各種“非現代”瀏覽器的“折磨”，面對移動端我們又將面臨哪些相容性的考驗呢？篇幅所限本文將向各位展示我們在移動端開發過程中針對相容性問題的一點經驗，主要包括方案選型及入門基礎，如果您是大牛、大神或是大神牛歡迎指點、指正，如果您是和我一樣的移動端新鳥歡迎探討共同學習。 在移動端的相容性上主要需要關注哪些方面的問題，對其又是如何定級的呢。由於要考慮裝置（pc裝置or行動裝置）、廠商、機型、作業系統及版本、瀏覽器及版本等多方面因素，移動端相容性被毫不誇張得稱為“後IE6時代”。如何在成本允許的情況下將頁面更好地呈現給使用者，讓我們先來看一組資料： 由圖可見，智能手機佔據了常用行動裝置終端95.2%的份額，而智能手機中安卓及IOS兩大平台佔比總和達到了89%，綜合成本、效率及整體效果考慮，我們暫且將移動端瀏覽器的相容性定級為：相容IOS和安卓平台的主流機型、系統及瀏覽器。 目前針對跨終端的方案，主要分為兩大陣營：一套資源Vs兩套資源。第一種是通過響應式或頁面終端判斷去實現一套資源適配所有終端；第二種是通過終端判斷分別調取兩套資源以適配所有終端。這兩種思路我們並不能斬釘截鐵的說哪一個更優選，正所謂“合適的才是最好的”。下面來對這兩種思路進行簡單的對比： 思路一：通過響應式或頁面終端判斷去實現一套資源適配所有終端 優勢：只需維護一套資源，維護成本較低。 劣勢：需載入適配各個終端的各個資源，在不同終端通過響應式布局實現不同展現，部分互動效果需要在頁面中做終端判斷，代價較大，若圖片資源為一套，部分圖片在超高解析度裝置（例如iphone系列）下會失真，且在非wifi情況下即使加了延時載入也易出現載入慢的情況。 技術選型：jquery（或原生js等）+ 響應式 + 前端模組載入器（seajs或RequireJS等）+ css前置處理器（sass 或less等）。jquery較好的相容性配合響應式可相對代價較小地實現跨終端。前端模組載入器主要負責按需載入，以提高頁面載入速度，css前置處理器的變數、運算、嵌套等特性可大大提高手動計算響應式的效率，媽媽再也不用擔心我把比例算錯了。當然後兩者可參考需求及成本決定是否採用。 思路二：通過終端判斷分別調取兩套資源以適配所有終端 優勢：可根據不同端做個性設計及個人化資訊推送且可按需載入，如移動端可配合重力感應、不同手勢做各種炫酷拽效果，pc頁面可不受流量限制做適合pc端的效果。 劣勢：需維護兩套資源，維護成本增加。 技術選型：zepto（或xui等移動端輕量級架構）+ 響應式 + 前端模組載入器 + css前置處理器 + 終端適配。zepto作為jquery的移動端版本，依然延續其自身優勢，大幅最佳化了移動端API且摒棄了相容“非現代瀏覽器”的冗餘代碼，成為移動端輕便可用的js架構代表，對於習慣了jquery的同學來說簡直是不二之選！ 終端適配目前一般通過ua判斷來實現。ua判斷可放在服務端也可放在頁面中，在Proxy 伺服器中做跳轉更快、更準確且不走應用程式層，即使瀏覽器禁用了js依然可以跳轉到相應的地址，同時秉承著公用服務放在服務端這樣的雲端服務理念，我們選擇了通過Proxy 伺服器做終端適配。 User-Agent嗅探，即Web瀏覽器發送一個Web頁面或資源請求時，會發送一個User-Agent首部作為HTTP請求的一部分，那麼我們就可以在伺服器端擷取想要的資訊，進而判斷並引導使用者到達相應的頁面地址。 下面我們通過詳細分析一個http請求中的user-agent首部來瞭解其原理： 要點明晰及注意事項： css像素與裝置像素：二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考A pixel is not a pixel is not a pixel進行理解。 視口：移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於行動裝置螢幕的實際寬度，而後者為我們為頁面定義的用於瀏覽器渲染的大小。 可參考A tale of two viewports進行理解。 媒體查詢：找准斷點。 響應式布局：當上下文環境發生變化時可考慮變化布局來展現優雅。當元素脫離文檔流絕對位置時，才是相對高度定義的。 響應式字型：font-face絕對會對你的站產生巨大的影響。當容器中定義字型單位為em時要注意繼承性，例如：當我們定義某個區塊層級元素的“font-size：1.5em; line-height: 2em;”時，line-height的實際行高為1.5em*2即3em。 文檔聲明：文檔聲明建議用html5的：<!DOCTYPE html>，它指示瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。同時需要定義文檔的視口資訊，如：<meta name=“viewport” content=“width=device-width, initial-scale=1, user-scalable=no”>width=device-width告訴瀏覽器渲染該頁面的寬度等於裝置寬度，initial-scale=1告訴瀏覽器初始化縮放的比例1:1，user-scalable=no禁止使用者縮放頁面。 相容性測試: 調試工具推薦chrome的模擬器加真機測試，更多關於debug的工具可以參考Debugging Mobile Web Page這篇文章。 總結： 移動端開啟了一個時代，它不是虛無縹緲或者高不可攀的，它反而讓曾經被忽視的渲染方式及web標準等實質性的問題更加清晰，相較上述兩種思路，我們更傾向於各司其職思路清晰的第二種方案，我們可根據不同終端做不同的互動設計、視覺設計，研究不同的前端技術、使用者體驗，適合的才是更好的。做為前端工程師，讓我們理解原理，探索實踐，跨終端任重而道遠。移動端相容性淺析
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
