上期文章分享了PC端的web兼容測(cè)試捍掺，本期我們通過(guò)調(diào)研移動(dòng)端web的特性和移動(dòng)端瀏覽器特性赏淌，進(jìn)一步探討Web移動(dòng)端的兼容測(cè)試平匈。

1. 移動(dòng)端web的載體

同PC端一樣课兄，移動(dòng)端的兼容性測(cè)試也是以瀏覽器為主牍氛。那么移動(dòng)端的瀏覽器如何選取呢？ 首先烟阐，我們把移動(dòng)端web分為兩類(lèi)：純網(wǎng)頁(yè)形式搬俊、Hybrid App 內(nèi)的web（常見(jiàn)的微信公眾號(hào)內(nèi)的H5頁(yè)面即可以看作是此類(lèi)網(wǎng)頁(yè)）紊扬。此分類(lèi)的依據(jù)是根據(jù)移動(dòng)端web的載體形式，從本質(zhì)上來(lái)看唉擂，網(wǎng)頁(yè)的載體都是瀏覽器餐屎。隨著技術(shù)的發(fā)展，瀏覽器以不同的形式出現(xiàn)玩祟，在移動(dòng)設(shè)備中常見(jiàn)的有OS系統(tǒng)的Webview組件腹缩、第三方封裝的Webview SDK、廠(chǎng)商的瀏覽器及第三方瀏覽器空扎。下述表格體現(xiàn)了移動(dòng)端web形式一般調(diào)用的載體形式（注：這僅表示常用形式藏鹊，原生app內(nèi)的也可以調(diào)用本機(jī)瀏覽器實(shí)現(xiàn)web展示，這里不做深入探討）转锈。

web形式分類(lèi)

移動(dòng)端瀏覽器有一個(gè)共性盘寡，底層都是基于Webkit內(nèi)核開(kāi)發(fā)的。根據(jù)上述的兩類(lèi)web形式撮慨，我們來(lái)具體看看載體的差異性竿痰。

1.1 Hybrid App載體

Hybrid App（混合模式移動(dòng)應(yīng)用）是指介于web-app、native-app這兩者之間的app砌溺，兼具“Native App良好用戶(hù)交互體驗(yàn)的優(yōu)勢(shì)”和“Web App跨平臺(tái)開(kāi)發(fā)的優(yōu)勢(shì)”（引自百度百科）影涉。Hybrid App是運(yùn)行在移動(dòng)操作系統(tǒng)的WebView上面的，WebView實(shí)際上是一種嵌入式的編程接口抚吠，WebView調(diào)用底層的瀏覽器內(nèi)核如WebKit等解析網(wǎng)頁(yè)常潮。從廣義上看弟胀，Webview指操作系統(tǒng)提供的原生瀏覽器接口楷力，從狹義上看，Webview特指android提供的原生瀏覽器接口孵户。Android 4.4之前的Android系統(tǒng)瀏覽器內(nèi)核是WebKit萧朝，Android4.4系統(tǒng)瀏覽器切換到了Chromium，內(nèi)核是Webkit的分支Blink夏哭。Android基于chromium的webview相較于基于webkit的webview检柬，提供更廣的HTML5,CSS3,Javascript支持。在Android5.0以上的版本竖配，支持了WebAudio,WebGL,WebRTC等更多的特性何址。
與之對(duì)應(yīng)，ios提供的原生瀏覽器接口叫UIWebview进胯，ios8以后變更為WKWebView用爪。WKWebView引入了webkit內(nèi)核，其優(yōu)勢(shì)表現(xiàn)在：更多的支持HTML5的特性胁镐；Safari相同的JavaScript引擎偎血；诸衔；將UIWebViewDelegate與UIWebView拆分成了14類(lèi)與3個(gè)協(xié)議(官方文檔說(shuō)明)；增加加載進(jìn)度屬性：estimatedProgress等颇玷。
此外笨农，針對(duì)andriod系統(tǒng)，許多第三方公司還提供了封裝的瀏覽器服務(wù)來(lái)彌補(bǔ)android自帶的webview組件的版本兼容問(wèn)題帖渠，如：intel的crosswalk和騰訊的TBS服務(wù)（及QQ X5服務(wù)）谒亦。它們都是基于Chromium內(nèi)核開(kāi)發(fā)，但對(duì)andriod版本兼容問(wèn)題作了更多的優(yōu)化空郊。

hybrid APP Web載體

基于第三方的webview組件诊霹，特別要提的是微信使用的TBS組件（微信的市場(chǎng)占有率高，小編的項(xiàng)目組較多使用了H5嵌入微信公眾號(hào)）版本差異渣淳。微信6.1安卓版本開(kāi)始使用的TBS服務(wù)內(nèi)核是QQ瀏覽器X5內(nèi)核脾还，基于Android 5.0 WebView Blink內(nèi)核（Chrome 37）開(kāi)發(fā)的。但并非所有的機(jī)型都能支持調(diào)起微信瀏覽器內(nèi)核服務(wù)（檢測(cè)辦法：1.使用微信打開(kāi)網(wǎng)頁(yè)入愧，下拉查看顯示鄙漏；2. 查看UA），部分仍然使用的是android系統(tǒng)原生的webview棺蛛，因?yàn)樾枰P(guān)注主流機(jī)型的差異性怔蚌。相比而言，Ios版本的微信就直接多了旁赊，直接調(diào)用系統(tǒng)的webview（即UIWebwiew或WKWebview）桦踊，跟隨系統(tǒng)版本的升級(jí)，webview版本也不同终畅。

1.2 純網(wǎng)頁(yè)載體

純網(wǎng)頁(yè)載體即為移動(dòng)端瀏覽器籍胯。無(wú)論是各大手機(jī)廠(chǎng)商還提供自己封裝的瀏覽器。這些瀏覽器离福，還是市場(chǎng)上流行的手機(jī)瀏覽器杖狼，底層技術(shù)都與webkit分不開(kāi)關(guān)系。結(jié)合市場(chǎng)的占有率妖爷，移動(dòng)端純web的載體兼容應(yīng)該著眼于主流瀏覽器蝶涩。在android平臺(tái)上，QQ手機(jī)瀏覽器和UC手機(jī)瀏覽器采用了基于webkit二次開(kāi)發(fā)的內(nèi)核絮识，命名分別為X5以及U3绿聘，360手機(jī)瀏覽器和百度手機(jī)瀏覽器內(nèi)核版采用的則是基于Chromuim內(nèi)核二次開(kāi)發(fā)的內(nèi)核。而在iOS平臺(tái)上次舌，由于系統(tǒng)封閉熄攘，不允許除系統(tǒng)自帶瀏覽器內(nèi)核以外的瀏覽器內(nèi)核進(jìn)入，因此各家瀏覽器的開(kāi)發(fā)均為在Safari的基礎(chǔ)上進(jìn)行二次開(kāi)發(fā)垃它，優(yōu)化功能和自制UI鲜屏。因此烹看，關(guān)于移動(dòng)端瀏覽器的兼容性問(wèn)題，我們主要聚焦android平臺(tái)洛史。

引用艾媒北極星

值得一提的是惯殊，此類(lèi)型兼容性測(cè)試過(guò)程中，除了UI和一般性交互的校驗(yàn)外也殖，還應(yīng)該關(guān)注瀏覽器的附屬功能引發(fā)的異常土思，例如無(wú)痕瀏覽模式對(duì)緩存頁(yè)面的影響、廣告攔截模式對(duì)廣告位的影響等忆嗜。

2.移動(dòng)設(shè)備的市場(chǎng)

軟件和運(yùn)行的系統(tǒng)是緊密聯(lián)系的己儒，關(guān)注系統(tǒng)、機(jī)型等的市場(chǎng)占有率能更有效的規(guī)劃兼容性測(cè)試的范圍捆毫。下面四幅圖表示了??2017年8月闪湾，市場(chǎng)上android和ios的系統(tǒng)版本占比，及對(duì)應(yīng)的廠(chǎng)商機(jī)型绩卤。通過(guò)結(jié)合市場(chǎng)流行度和上述兩類(lèi)移動(dòng)端web載體特性的分析途样，可以得出系統(tǒng)和平臺(tái)兼容的列表（見(jiàn)小結(jié)）。

android系統(tǒng)版本國(guó)內(nèi)市場(chǎng)占有率

android手機(jī)廠(chǎng)商國(guó)內(nèi)市場(chǎng)占有率

ios系統(tǒng)版本國(guó)內(nèi)市場(chǎng)占有率

iphone型號(hào)國(guó)內(nèi)市場(chǎng)占有率

數(shù)據(jù)來(lái)源：百度瀏覽統(tǒng)計(jì)研究院

3.移動(dòng)端設(shè)備的分辨率

1. 移動(dòng)端設(shè)備的分辨率
   在選擇分辨率前濒憋，先了解幾個(gè)概念：
   px（Pixels）：像素何暇，電子屏幕上組成一幅圖畫(huà)或照片的最基本單元，我們常說(shuō)的屏幕分辨率的單位凛驮。
   ppi=dpi（Pixels Per Inch）：每英寸像素?cái)?shù)裆站，即像素密度。該值越高黔夭，則屏幕越細(xì)膩宏胯。ppi= 屏幕對(duì)角線(xiàn)上的像素點(diǎn)數(shù)/對(duì)角線(xiàn)長(zhǎng)度 = √ （屏幕橫向像素點(diǎn)^2 + 屏幕縱向像素點(diǎn)^2）/屏幕尺寸。以三星note5為例纠修，該屏幕分辨率為1440px2560px胳嘲，5.7英寸厂僧。則點(diǎn)密度為 √ (1440^2 +2560^2) /5.7 = 515ppi扣草。
   dpr(devicePixelRatio)：設(shè)備像素比。是默認(rèn)縮放為100%的情況下颜屠，設(shè)備上物理像素和設(shè)備獨(dú)立像素比值辰妙。dpr＝物理像素／css像素 （在x方向或者y方向）。javascript屬性window.devicePixelRatio可以查看設(shè)備的dpr（http://www.zhangxinxu.com/study/201208/window-device-pixel-ratio.html）甫窟。例如iphone6使用的retina屏幕的設(shè)備像素比是2密浑，其物理像素為1334750px，css的像素為667*375px粗井。
   android的開(kāi)發(fā)分辨率適配設(shè)計(jì)中還引入一個(gè)概念：dp = dip （device independent pixels）：設(shè)備獨(dú)立像素尔破。1dp=（屏幕ppi/ 160）px街图。參考密度為160ppi，根據(jù)像素密度大致分為以下幾種規(guī)格：
   
   android像素密度設(shè)計(jì)規(guī)格
   
   這些屏幕的密度值比為：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3懒构；即餐济，在xhdpi的密度下，1dp=2px胆剧；在hdpi情況下絮姆，1dp=1.5px。其他類(lèi)推秩霍。開(kāi)發(fā)過(guò)程中是基于devicePixelRatio=1的時(shí)候設(shè)計(jì)的篙悯，但UI資源區(qū)分@1x、@2x和@3x來(lái)適配不同設(shè)備像素比的屏幕铃绒。
   ios的從iphone4開(kāi)始使用retina屏幕鸽照，改變了dpr：
   
   iphone屏幕密度分類(lèi)
   
   通過(guò)上述的概念描述，移動(dòng)端的分辨率不僅要關(guān)注物理像素本身颠悬，還應(yīng)該屏幕密度來(lái)衡量分辨率的適配程度移宅。網(wǎng)址（http://screensiz.es/phone；http://dpi.lv/）可以快速查詢(xún)到設(shè)備的屏幕和尺寸椿疗。結(jié)合市場(chǎng)目前流行的分辨率和廠(chǎng)商漏峰，可以得出目前分辨率兼容需要覆蓋的范圍（見(jiàn)小結(jié)）。
   
   android移動(dòng)設(shè)備分辨率排名
   
   
   ios移動(dòng)設(shè)備分辨率排名

4.小結(jié)

本文通過(guò)分析移動(dòng)端web的兩類(lèi)形式：hybrid app和純網(wǎng)頁(yè)届榄，調(diào)研了了市場(chǎng)關(guān)于系統(tǒng)浅乔、設(shè)備、分辨率的流行度铝条，結(jié)合移動(dòng)設(shè)備分辨率的特性靖苇，得出web移動(dòng)端的兼容測(cè)試矩陣（目前移動(dòng)端以html5技術(shù)為主，兼容列表適用于H5開(kāi)發(fā)的移動(dòng)端web）班缰。

hybrid APP web頁(yè)面平臺(tái)及系統(tǒng)兼容矩陣

純網(wǎng)頁(yè)平臺(tái)及系統(tǒng)兼容矩陣

移動(dòng)端web分辨率兼容矩陣