屋顶的秘密

上期文章分享了PC端的web兼容测试，本期我们通过调研移动端web的特性和移动端浏览器特性，进一步探讨Web移动端的兼容测试。

1. 移动端web的载体

同PC端一样，移动端的兼容性测试也是以浏览器为主。那么移动端的浏览器如何选取呢？ 首先，我们把移动端web分为两类：纯网页形式、Hybrid App 内的web（常见的微信公众号内的H5页面即可以看作是此类网页）。此分类的依据是根据移动端web的载体形式，从本质上来看，网页的载体都是浏览器。随着技术的发展，浏览器以不同的形式出现，在移动设备中常见的有OS系统的Webview组件、第三方封装的Webview SDK、厂商的浏览器及第三方浏览器。下述表格体现了移动端web形式一般调用的载体形式（注：这仅表示常用形式，原生app内的也可以调用本机浏览器实现web展示，这里不做深入探讨）。

web形式分类

移动端浏览器有一个共性，底层都是基于Webkit内核开发的。根据上述的两类web形式，我们来具体看看载体的差异性。

1.1 Hybrid App载体

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”（引自百度百科）。Hybrid App是运行在移动操作系统的WebView上面的，WebView实际上是一种嵌入式的编程接口，WebView调用底层的浏览器内核如WebKit等解析网页。从广义上看，Webview指操作系统提供的原生浏览器接口，从狭义上看，Webview特指android提供的原生浏览器接口。Android 4.4之前的Android系统浏览器内核是WebKit，Android4.4系统浏览器切换到了Chromium，内核是Webkit的分支Blink。Android基于chromium的webview相较于基于webkit的webview，提供更广的HTML5,CSS3,Javascript支持。在Android5.0以上的版本，支持了WebAudio,WebGL,WebRTC等更多的特性。
与之对应，ios提供的原生浏览器接口叫UIWebview，ios8以后变更为WKWebView。WKWebView引入了webkit内核，其优势表现在：更多的支持HTML5的特性；Safari相同的JavaScript引擎；；将UIWebViewDelegate与UIWebView拆分成了14类与3个协议(官方文档说明)；增加加载进度属性：estimatedProgress等。
此外，针对andriod系统，许多第三方公司还提供了封装的浏览器服务来弥补android自带的webview组件的版本兼容问题，如：intel的crosswalk和腾讯的TBS服务（及QQ X5服务）。它们都是基于Chromium内核开发，但对andriod版本兼容问题作了更多的优化。

hybrid APP Web载体

基于第三方的webview组件，特别要提的是微信使用的TBS组件（微信的市场占有率高，小编的项目组较多使用了H5嵌入微信公众号）版本差异。微信6.1安卓版本开始使用的TBS服务内核是QQ浏览器X5内核，基于Android 5.0 WebView Blink内核（Chrome 37）开发的。但并非所有的机型都能支持调起微信浏览器内核服务（检测办法：1.使用微信打开网页，下拉查看显示；2. 查看UA），部分仍然使用的是android系统原生的webview，因为需要关注主流机型的差异性。相比而言，Ios版本的微信就直接多了，直接调用系统的webview（即UIWebwiew或WKWebview），跟随系统版本的升级，webview版本也不同。

1.2 纯网页载体

纯网页载体即为移动端浏览器。无论是各大手机厂商还提供自己封装的浏览器。这些浏览器，还是市场上流行的手机浏览器，底层技术都与webkit分不开关系。结合市场的占有率，移动端纯web的载体兼容应该着眼于主流浏览器。在android平台上，QQ手机浏览器和UC手机浏览器采用了基于webkit二次开发的内核，命名分别为X5以及U3，360手机浏览器和百度手机浏览器内核版采用的则是基于Chromuim内核二次开发的内核。而在iOS平台上，由于系统封闭，不允许除系统自带浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均为在Safari的基础上进行二次开发，优化功能和自制UI。因此，关于移动端浏览器的兼容性问题，我们主要聚焦android平台。

引用艾媒北极星

值得一提的是，此类型兼容性测试过程中，除了UI和一般性交互的校验外，还应该关注浏览器的附属功能引发的异常，例如无痕浏览模式对缓存页面的影响、广告拦截模式对广告位的影响等。

2.移动设备的市场

软件和运行的系统是紧密联系的，关注系统、机型等的市场占有率能更有效的规划兼容性测试的范围。下面四幅图表示了💍2017年8月，市场上android和ios的系统版本占比，及对应的厂商机型。通过结合市场流行度和上述两类移动端web载体特性的分析，可以得出系统和平台兼容的列表（见小结）。

android系统版本国内市场占有率

android手机厂商国内市场占有率

ios系统版本国内市场占有率

iphone型号国内市场占有率

数据来源：百度浏览统计研究院

3.移动端设备的分辨率

1. 移动端设备的分辨率
   在选择分辨率前，先了解几个概念：
   px（Pixels）：像素，电子屏幕上组成一幅图画或照片的最基本单元，我们常说的屏幕分辨率的单位。
   ppi=dpi（Pixels Per Inch）：每英寸像素数，即像素密度。该值越高，则屏幕越细腻。ppi= 屏幕对角线上的像素点数/对角线长度 = √ （屏幕横向像素点^2 + 屏幕纵向像素点^2）/屏幕尺寸。以三星note5为例，该屏幕分辨率为1440px2560px，5.7英寸。则点密度为 √ (1440^2 +2560^2) /5.7 = 515ppi。
   dpr(devicePixelRatio)：设备像素比。是默认缩放为100%的情况下，设备上物理像素和设备独立像素比值。dpr＝物理像素／css像素 （在x方向或者y方向）。javascript属性window.devicePixelRatio可以查看设备的dpr（http://www.zhangxinxu.com/study/201208/window-device-pixel-ratio.html）。例如iphone6使用的retina屏幕的设备像素比是2，其物理像素为1334750px，css的像素为667*375px。
   android的开发分辨率适配设计中还引入一个概念：dp = dip （device independent pixels）：设备独立像素。1dp=（屏幕ppi/ 160）px。参考密度为160ppi，根据像素密度大致分为以下几种规格：
   
   android像素密度设计规格
   
   这些屏幕的密度值比为：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3；即，在xhdpi的密度下，1dp=2px；在hdpi情况下，1dp=1.5px。其他类推。开发过程中是基于devicePixelRatio=1的时候设计的，但UI资源区分@1x、@2x和@3x来适配不同设备像素比的屏幕。
   ios的从iphone4开始使用retina屏幕，改变了dpr：
   
   iphone屏幕密度分类
   
   通过上述的概念描述，移动端的分辨率不仅要关注物理像素本身，还应该屏幕密度来衡量分辨率的适配程度。网址（http://screensiz.es/phone；http://dpi.lv/）可以快速查询到设备的屏幕和尺寸。结合市场目前流行的分辨率和厂商，可以得出目前分辨率兼容需要覆盖的范围（见小结）。
   
   android移动设备分辨率排名
   
   
   ios移动设备分辨率排名

4.小结

本文通过分析移动端web的两类形式：hybrid app和纯网页，调研了了市场关于系统、设备、分辨率的流行度，结合移动设备分辨率的特性，得出web移动端的兼容测试矩阵（目前移动端以html5技术为主，兼容列表适用于H5开发的移动端web）。

hybrid APP web页面平台及系统兼容矩阵

纯网页平台及系统兼容矩阵

移动端web分辨率兼容矩阵