移動端的競爭愈演愈烈，大家的碎片時間更多地消耗在了手機(jī)和平板上，而非PC。開發(fā)者在不同平臺不同終端之間來回周旋，如何把控兼容性就成了一個非常重要的課題。接下來，看看暢游VC是如何分析和看待移動端兼容性的~
移動網(wǎng)民的規(guī)模將在2013年底達(dá)到5.0億，增速為19.1%。預(yù)計(jì)到2017年，移動網(wǎng)民將趕超PC網(wǎng)民，成為互聯(lián)網(wǎng)的第一大用戶群體，移動端將成為網(wǎng)民最主要的上網(wǎng)渠道。互聯(lián)網(wǎng)的加速滲透和全民移動互聯(lián)有望在下一個5年實(shí)現(xiàn)。在過去的幾年時間里，移動智能設(shè)備快速普及，配置迅速提升，許多過去在PC端才能完成的需求都轉(zhuǎn)移到了移動端，導(dǎo)致PC端流量也逐漸向移動端轉(zhuǎn)移。未來幾年許多互聯(lián)網(wǎng)產(chǎn)品移動端的流量即將超過PC端，整個互聯(lián)網(wǎng)的使用場景產(chǎn)生巨大變遷。
——《2014年中國移動互聯(lián)網(wǎng)行業(yè)年度研究報(bào)告》
來自艾瑞的《2014年中國移動互聯(lián)網(wǎng)行業(yè)年度研究報(bào)告》向我們展示著在未來的互聯(lián)網(wǎng)世界，移動端將成為主要戰(zhàn)場，若想在浪潮洶涌中屹立不倒，我們就要開始移動端，開始一個新的征程。
作為一名前端工程師，我們享受過或仍在享受著pc端各種”非現(xiàn)代”瀏覽器的”折磨”，面對移動端我們又將面臨哪些兼容性的考驗(yàn)?zāi)?篇幅所限本文將向各位展示我們在移動端開發(fā)過程中針對兼容性問題的一點(diǎn)經(jīng)驗(yàn)，主要包括方案選型及入門基礎(chǔ)，如果您是大牛、大神或是大神牛歡迎指點(diǎn)、指正，如果您是和我一樣的移動端新鳥歡迎探討共同學(xué)習(xí)。
在移動端的兼容性上主要需要關(guān)注哪些方面的問題，對其又是如何定級的呢。由于要考慮設(shè)備(pc設(shè)備or移動設(shè)備)、廠商、機(jī)型、操作系統(tǒng)及版本、瀏覽器及版本等多方面因素，移動端兼容性被毫不夸張得稱為”后IE6時代”。如何在成本允許的情況下將頁面更好地呈現(xiàn)給用戶，讓我們先來看一組數(shù)據(jù)：
由圖可見，智能手機(jī)占據(jù)了常用移動設(shè)備終端95.2%的份額，而智能手機(jī)中安卓及IOS兩大平臺占比總和達(dá)到了89%，綜合成本、效率及整體效果考慮，我們暫且將移動端瀏覽器的兼容性定級為：兼容IOS和安卓平臺的主流機(jī)型、系統(tǒng)及瀏覽器。
目前針對跨終端的方案，主要分為兩大陣營：一套資源Vs兩套資源。第一種是通過響應(yīng)式或頁面終端判斷去實(shí)現(xiàn)一套資源適配所有終端;第二種是通過終端判斷分別調(diào)取兩套資源以適配所有終端。這兩種思路我們并不能斬釘截鐵的說哪一個更優(yōu)選，正所謂”合適的才是最好的”。下面來對這兩種思路進(jìn)行簡單的對比：
思路一:通過響應(yīng)式或頁面終端判斷去實(shí)現(xiàn)一套資源適配所有終端
優(yōu)勢：只需維護(hù)一套資源，維護(hù)成本較低。
劣勢：需加載適配各個終端的各個資源，在不同終端通過響應(yīng)式布局實(shí)現(xiàn)不同展現(xiàn)，部分交互效果需要在頁面中做終端判斷，代價較大，若圖片資源為一套，部分圖片在超高分辨率設(shè)備(例如iphone系列)下會失真，且在非wifi情況下即使加了延時加載也易出現(xiàn)加載慢的情況。
技術(shù)選型：jquery(或原生js等)+ 響應(yīng)式 + 前端模塊加載器(seajs或RequireJS等)+ css預(yù)處理器(sass 或less等)。jquery較好的兼容性配合響應(yīng)式可相對代價較小地實(shí)現(xiàn)跨終端。前端模塊加載器主要負(fù)責(zé)按需加載，以提高頁面加載速度，css預(yù)處理器的變量、運(yùn)算、嵌套等特性可大大提高手動計(jì)算響應(yīng)式的效率，媽媽再也不用擔(dān)心我把比例算錯了。當(dāng)然后兩者可參考需求及成本決定是否采用。
