漲姿勢(shì)時(shí)間！你應(yīng)該了解的“移動(dòng)端兼容性”

2022-07-02 分類：網(wǎng)站建設(shè)

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

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

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

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

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

思路一:通過(guò)響應(yīng)式或頁(yè)面終端判斷去實(shí)現(xiàn)一套資源適配所有終端

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

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

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

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

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

劣勢(shì)：需維護(hù)兩套資源，維護(hù)成本增加。

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

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

User-Agent嗅探，即Web瀏覽器發(fā)送一個(gè)Web頁(yè)面或資源請(qǐng)求時(shí)，會(huì)發(fā)送一個(gè)User-Agent首部作為HTTP請(qǐng)求的一部分，那么我們就可以在服務(wù)器端獲取想要的信息，進(jìn)而判斷并引導(dǎo)用戶到達(dá)相應(yīng)的頁(yè)面地址。

下面我們通過(guò)詳細(xì)分析一個(gè)http請(qǐng)求中的user-agent首部來(lái)了解其原理：

要點(diǎn)明晰及注意事項(xiàng)：

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

視口：移動(dòng)端瀏覽器有兩個(gè)視口，即可見(jiàn)視口與布局視口，二者的區(qū)別在于前者為基于移動(dòng)設(shè)備屏幕的實(shí)際寬度，而后者為我們?yōu)轫?yè)面定義的用于瀏覽器渲染的大小。可參考A tale of two viewports進(jìn)行理解。

媒體查詢：找準(zhǔn)斷點(diǎn)。

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

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

文檔聲明：文檔聲明建議用html5的：<!DOCTYPE html>，它指示瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。同時(shí)需要定義文檔的視口信息，如：<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”>width=device-width告訴瀏覽器渲染該頁(yè)面的寬度等于設(shè)備寬度，initial-scale=1告訴瀏覽器初始化縮放的比例1:1，user-scalable=no禁止用戶縮放頁(yè)面。

兼容性測(cè)試:

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

總結(jié)：

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

關(guān)于暢游VC

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

分享標(biāo)題：漲姿勢(shì)時(shí)間！你應(yīng)該了解的“移動(dòng)端兼容性”
分享URL：http://www.rwnh.cn/news42/173742.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、定制開(kāi)發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站收錄、云服務(wù)器

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

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

漲姿勢(shì)時(shí)間！你應(yīng)該了解的“移動(dòng)端兼容性”