无码白浆一二三区,亚洲天堂午夜在线,丰满人妻在线视频

屋頂?shù)拿孛?/div>

上期文章分享了PC端的web兼容測試，本期我們通過調(diào)研移動端web的特性和移動端瀏覽器特性，進一步探討Web移動端的兼容測試。

移動端web的載體

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

web形式分類

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

1.1 Hybrid App載體

Hybrid App（混合模式移動應(yīng)用）是指介于web-app、native-app這兩者之間的app，兼具“Native App良好用戶交互體驗的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”（引自百度百科）。Hybrid App是運行在移動操作系統(tǒng)的WebView上面的，WebView實際上是一種嵌入式的編程接口，WebView調(diào)用底層的瀏覽器內(nèi)核如WebKit等解析網(wǎng)頁。從廣義上看，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等更多的特性。
與之對應(yīng)，ios提供的原生瀏覽器接口叫UIWebview，ios8以后變更為WKWebView。WKWebView引入了webkit內(nèi)核，其優(yōu)勢表現(xiàn)在：更多的支持HTML5的特性；Safari相同的JavaScript引擎；；將UIWebViewDelegate與UIWebView拆分成了14類與3個協(xié)議(官方文檔說明)；增加加載進度屬性：estimatedProgress等。
此外，針對andriod系統(tǒng)，許多第三方公司還提供了封裝的瀏覽器服務(wù)來彌補android自帶的webview組件的版本兼容問題，如：intel的crosswalk和騰訊的TBS服務(wù)（及QQ X5服務(wù)）。它們都是基于Chromium內(nèi)核開發(fā)，但對andriod版本兼容問題作了更多的優(yōu)化。

hybrid APP Web載體

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

1.2 純網(wǎng)頁載體

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

引用艾媒北極星

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

2.移動設(shè)備的市場

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

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

android手機廠商國內(nèi)市場占有率

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

iphone型號國內(nèi)市場占有率

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

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

移動端設(shè)備的分辨率
在選擇分辨率前，先了解幾個概念：
px（Pixels）：像素，電子屏幕上組成一幅圖畫或照片的最基本單元，我們常說的屏幕分辨率的單位。
ppi=dpi（Pixels Per Inch）：每英寸像素數(shù)，即像素密度。該值越高，則屏幕越細膩。ppi= 屏幕對角線上的像素點數(shù)/對角線長度 = √ （屏幕橫向像素點^2 + 屏幕縱向像素點^2）/屏幕尺寸。以三星note5為例，該屏幕分辨率為1440px2560px，5.7英寸。則點密度為 √ (1440^2 +2560^2) /5.7 = 515ppi。
dpr(devicePixelRatio)：設(shè)備像素比。是默認縮放為100%的情況下，設(shè)備上物理像素和設(shè)備獨立像素比值。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的開發(fā)分辨率適配設(shè)計中還引入一個概念：dp = dip （device independent pixels）：設(shè)備獨立像素。1dp=（屏幕ppi/ 160）px。參考密度為160ppi，根據(jù)像素密度大致分為以下幾種規(guī)格：

android像素密度設(shè)計規(guī)格

這些屏幕的密度值比為：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3；即，在xhdpi的密度下，1dp=2px；在hdpi情況下，1dp=1.5px。其他類推。開發(fā)過程中是基于devicePixelRatio=1的時候設(shè)計的，但UI資源區(qū)分@1x、@2x和@3x來適配不同設(shè)備像素比的屏幕。
ios的從iphone4開始使用retina屏幕，改變了dpr：

iphone屏幕密度分類

通過上述的概念描述，移動端的分辨率不僅要關(guān)注物理像素本身，還應(yīng)該屏幕密度來衡量分辨率的適配程度。網(wǎng)址（http://screensiz.es/phone；http://dpi.lv/）可以快速查詢到設(shè)備的屏幕和尺寸。結(jié)合市場目前流行的分辨率和廠商，可以得出目前分辨率兼容需要覆蓋的范圍（見小結(jié)）。

android移動設(shè)備分辨率排名

ios移動設(shè)備分辨率排名

4.小結(jié)

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