移动端H5页面适配问题研究

刚开始做移动端web开发的同学应该都碰到过页面适配问题，为什么我在开发手机上调试好的页面在其他手机会有这样或那样的样式问题？viewport我也设置了，为什么还是显示不正常？难道我要为每种手机屏幕写媒体查询，有没有简单的方式，可以不用关注手机屏幕的差异性呢？

百度中搜索移动端H5页面适配关键字，大概可以得到180多万的搜索结果，由此可见这个问题也得到很多人的关注。本文的目的主要是分析解决移动端H5页面适配问题过程中牵扯到的知识点，然后梳理分析目前常见的适配解决方案。

由于本文内容较长，下面先给出文章的提纲：

1.适配的基础知识

1.1理解移动端单位
　1.2理解viewport

2.页面中那些内容需要适配

2.1图片高清适配
　2.2字体大小适配
　2.3布局宽度适配

3.适配解决方案分析

---这里是分隔符，正文开始---

1.适配的基础知识

1.1理解单位

px、pt、pc、sp、em、rem、dpr、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi

不知道正在看文章的你对上面列出来的这些单位是不是很熟悉，如果是的话，就可以跳过了。

理解这些单位的用法以及区别，对理解移动端页面适配有很大的帮助。为了让你对上面的单位有个大体的认知，这里把上面的单位分成了三类：

• 如果你是ios开发，你需要了解的单位：pt，px，ppi；实际开发中用到的单位：pt。
• 如果你是android开发，你需要了解的单位：dip/dp，sp，px，dpi/ppi，ldpi，mdpi，hdpi，xhdpi，xxhdpi；实际开发中用到的单位：dp，sp。
• 如果你是前端开发，你需要了解的单位：px，em，rem，dpr；实际开发中用到的单位：px，em，rem，dpr

下面分别对每个单位展开分析：

*** dpi / ppi ***

** dpi ** , dot per inch ，每英寸的点数；打印或印刷领域使用的单位，代表打印机每英寸可以打印出的点数 。

ppi, pixel per inch ，每英寸的像素数，像素密度；表示图像或者显示器单位面积上像素数量。

dpi 和 ppi 都是描述分辨率的单位，但是两者是有区别的，但是在描述手机分辨率时，可以认为两者意义相同，以前android设备偏向于使用dpi，ios设备偏向于使用ppi，目前android和ios统一使用ppi描述手机屏幕的像素显示密度。

ppi的计算方法：

*** ldpi、mdpi、hdpi、xhdpi、xxhdpi ***

android对移动设备不同屏幕分辨率的分类。

*** pt，pc，sp ***

** pt ** ，磅（point的音译），印刷中使用的表示字型的大小单位，1inch = 72pt （印刷中这个关系成立，ios中不成立），ios开发中使用的逻辑单位，是和设备无关的单位。

** pc ** 印刷中使用的单位，1pc = 12pt，不需要关注。

** sp **， scale independent pixel ，android设备中用来显示字体大小的，和设备无关的尺寸，当设置字体大小单位为sp时，android系统字体大小会影响设置的字体渲染时的大小。

*** dip / dp ***

** dp/dip**， device independent pixel，表示设备独立像素，和设备无关的尺寸，相同的dp/dip值，不同设备展示的效果是一样的。

android使用的单位，之前偏向使用dip，目前建议使用dp。

android设备中，规定160ppi的屏幕，1dp = 1px；320ppi的屏幕，1dp = 2px，所以android设备中dp的计算方法：dp = px * (ppi / 160)，这里的px是指设备的物理像素点。

和ios开发中用的pt单位类似。

*** px ***

** px ** ，像素，有两种像素概念，一种是网页设计中使用的css像素，一种是原生移动系统使用的物理像素。

作为css像素时，表示的也是一种设备无关单位，与android中使用的dp类似，默认情况下与系统分辨率下的像素大小相同，标清设备中，一个css像素和一个设备物理像素大小相同；在高清设备中，一个css像素可以大于或者等于多个设备物理像素，具体一个css像素，需要多少个物理像素来展示，浏览器会根据dpr计算。

原生移动系统中使用px单位时，表示的就是屏幕的物理像素点，每种屏幕的物理像素点大小可能不一样。

*** dpr ***

** dpr ** ，device pixel ratio， 横向或者纵向设备物理像素数量与设备独立像素数量的比值，浏览器中可以通过window.devicePixelRatio获取(存在兼容性问题)。

对于原生app，ios和android系统会自动根据dpr计算出渲染时需要的px值，最终不同屏幕上展示出来的大小很接近；而移动端页面渲染时想要做到这一点，就必须首先得到设备的dpr，然后再根据dpr计算渲染需要的px值。

ios设备中iphone3的dpr为1；iphone4,5,6,7的dpr为2；iphone6+,7+的dpr为3。iphone6+和iphone7+实际计算出来的dpr应该时2.6左右，但是官方还是建议dpr为3，这是因为ios系统利用了一种“缩减像素采样”算法，自动缩减到2.6。

android设备中dpr值有多种，可知的有0.75，1，1.5，1.75，2，2.5，2.75，3，4等。

*** em，rem ***

** em ** 相对单位，CSS2引入的单位，作为字体大小使用时和百分比单位类似，都是相对于最近的父元素设置的字体大小，在body上设置字体大小为100%和设置字体大小为1em是一样的效果，默认情况下浏览器的字体大小为16px，这样只要浏览器默认得字体大小不变，1em = 16px。

** rem ** 相对单位，root em，CSS3新增的单位，作用和em类似，唯一的区别就是em是相对父元素的，rem是相对html根节点的，即所有使用rem单位的子元素的字体大小都是相对根节点的，所以使用rem可以避免使用em带来的子元素字体大小逐层复合的连锁反应。

更多关于em，rem的知识参见这篇文章理解web开发中的em单位和rem单位。

*** 分辨率 ***

平时说的手机屏幕分辨率，也称为物理分辨率或者原生分辨率，通常包括纵向分辨率和横向分辨率，例如iphone6的物理分辨率是1334 x 750，其中纵向分辨率是1334px，横向分辨率是750px，表示纵向方向可以显示1334个物理像素点，横向上可以显示750个物理像素点，这里描述分辨率使用的px单位，和css中使用的px单位意义不一样，这里代指物理设备的像素点。

还有一种分辨率叫做系统分辨率，例如iphone6的系统分辨率是667 x 375，其中高度是667pt，宽度是375pt，这里描述分辨率使用了pt单位，是一种设备无关单位。

屏幕尺寸相同的设备，物理分辨率越高，ppi也就越大，绝对单位面积上展示的物理像素数量越多，展示图片也就越细腻。

苹果把ppi > 300的屏幕称为视网膜屏,Retina屏。

1.2理解viewport

传统桌面web页面布局通常是定宽布局，但是定宽布局的方式对移动端却不适用，原因手机屏幕尺寸大小各异，定宽布局可能在某些手机上出现横向滚动条，导致阅读效果比较差。

为了让手机有更好的网页浏览体验，苹果引入了viewport，为页面提供了一个虚拟的布局窗口，在这个虚拟的布局窗口中渲染页面，然后系统会把渲染好的页面自动缩放到手机屏幕大小。

虽然viewport还没有成为正式的规范，但是现在绝大部分浏览器都支持viewport。

在桌面浏览器中，viewport严格等于浏览器窗口大小，页面渲染时，页面宽度不会超过浏览器的宽度。

移动端屏幕太窄，为了提供更好的页面体验，移动端提供了两种viewport：可视viewport，布局viewport。

可视viewport就是当前屏幕正在展示的区域，也就是移动设备屏幕的宽度，宽高通过window.innerWidth和window.innerHeight获取（存在兼容性问题）。

布局viewport，页面布局实际用到的viewport，通常比可视viewport要宽，宽高通过document.documentElement.clientWidth和document.documentElement.clientHeight获取。

移动端还有一种viewport概念，可以理解为理想viewport，作用就是在理想viewport下，不同移动设备，展示的字体大小接近，并且不需要用户缩放就可以展示全部的页面内容。

理想viewport的宽度默认等于可视viewport的宽度，但是对同一台设备来说，这个理想viewport的宽度是可以改变的，而可视viewport的宽度是不可变的。

如何使用理想viewport来布局页面呢？只需要设置viewport的width等于device-width。

viewport的属性，推荐使用以及支持度较广泛的属性只有6个：width，height，initial-scale，maximum-scale，minimum-scale，user-scalable。

width 设置viewport布局宽度，内核是webkit的浏览器默认值是980px，取值范围在200-10000px，也可以取值为设备宽度device-width（等于横向设备无关像素数量）。

height 设置viewport布局高度，默认值依赖设备长宽比以及宽度值，取值范围在223-10000px，也可以取值为设备高度device-height。

initial-scale 设置初始缩放比例，页面第一次加载时的缩放比例。默认比例依赖于显示密度。在密度低于200 dpi的显示设备上，比例为1.0。在密度介于200及300 dpi之间的显示设备上，比例为1.5。对于具有300 dpi以上密度的显示设备，比例为密度/150 dpi向下取整的结果。取值范围由maximum-scale属性以及minimum-scale属性决定。如果设置initial-scale值为1，width默认是device-width，height默认是device-height

initial-scale设置的缩放大小会改变理想viewport的大小，不会改变可视viewport的大小，也不会改变布局viewport的大小，这是某些适配方案依赖的基本原理，也是解决1px问题的关键。后面分析适配方案时，动态viewport适配方案就依赖这个知识点。

maximum-scale 允许用户缩放到的最大比例，默认值是0.5，范围从0到10.0。

minimum-scale 允许用户缩放到的最小比例，默认值是5.0，范围从0到10.0。

user-scalable 用户是否可以手动缩放，值可以是：yes/true允许用户缩放；no/false不允许用户缩放。

2.页面中那些内容需要适配

2.1图片高清适配

图片适配的目的是为了在页面中可以高清还原设计图中用到的图片。

页面中用到的图片是否清晰和展示页面的硬件设备的dpr以及图片分辨率这两个因素有关，下面会通过三个例子来说明这个问题。

***示例一 ***

例如dpr=2的设备，1个设备无关像素(android中的1dp，ios中的1pt)需要4个设备物理像素点填充。对于尺寸为100 x 120 (px)的图片，如果用<img>来展示，图片显示时会产生模糊现象。

原因：渲染图片时，宽度是100px，所以横向会占用100个设备无关像素，高度是120px,所以纵向会占用120个设备无关像素，每个设备无关像素又需要2x2个物理像素点来填充，而图片在每个设备无关像素(px)单位上提供的像素点只有1x1个，这时，系统通过一定的算法在这1个像素点上就近取色，取到4个颜色(这4种颜色接近但是有一定区别)之后，当成4个像素点，然后填充到1个设备无关像素点上，这样就导致图片显示时模糊，dpr越大，这种方式显示的图片越模糊。

示例二

还是dpr=2的设备，但是准备了一个尺寸为200 x 240 (px)的图片，还是用<img>来展示，这时显示的图片就比较清晰了。

原因：这时图片本身可以在一个设备无关像素单位上提供2x2个物理像素点，设备展示图片时直接拿图片提供的像素点来填充就可以了，不用对像素点进行处理，所以可以比较清晰的显示图片。

示例三

还是dpr=2的设备，这次准备一个尺寸400 x 480 (px)的图片，还是用<img>来展示时，这种情况展示的图片缺少锐利度，也影响了图片的清晰度，但是很难看出来。

原因：图片本身在一个设备无关像素点单位上提供了4x4个物理像素点，而设备本身只需要2x2个物理像素点，所以会通过缩减采样算法，在图片提供的4x4个物理像素点中，选取颜色接近的2x2个物理像素点填充到设备无关像素点上，所以也会产生一定的色差，这种情况下图片尺寸越大，这种色差也就越明显，但是人眼很难区分这种色差。

下面是我在oppo的一款手机上的测试结果，结合这张效果图就可以很好的理解上面的三个示例了：

由上图可知字体大小只与css单位px有关，而每个设备上px的绝对宽度又和设备的绝对宽度以及绝对宽度上划分出的设备无关像素点dp有关；只要设备的横向dp数量与绝对宽度的比值(dp/cm)相同，就可以保证px在不同设备上展示的绝对宽度是一样的；如果dp/cm的比值过大，那么px的绝对长度就会变小，看起来就会显小；如果dp/cm的比值过小，那么px的绝对长度就会变大，看起来就会显大；一般来说手机屏幕分辨率越高，相同px值的字体看起来就会越小。

iphone5和6的dp/cm比值十分接近，所以12px大小的字体在这两种手机上显示的大小基本一样，看不出来区别，但是iphone6+的dp/cm比值要比iphone5,6的略大，这就导致12px大小的字体在6+上显示的比5，6上显示的略小，上面的淘宝对比图仔细分辨可以看出来。

android的手机屏幕dp/cm比值在各个设备之间也有差异性，并且比较有多样性。所以同样12px大小的字体，各个设备显示时也是有差别的。

这种显示差别在iphone系列手机中可以忽略不计，但是android碎片化比较严重，完美兼容各种机型没有必要，主流机型中这种显示差别也可以忽略不计，所以采用这种方式进行字体适配只需要px值设置成一样的就可以了。

** 第1种字体适配方案优缺点**

优点：1.不同设备中字体大小显示一致，比较统一；2.大屏手机可以显示更多的文字；

缺点：1.由于单个字体宽度是定死的，所以在有些机型下可能会影响页面布局；

** 第2种字体适配方案原理 **

在设计稿中，计算出字体大小相对于基准字体大小（基准字体大小可以选择设计稿宽度，一般为了计算方便，会把设计稿宽度/10得到的值作为基准字体大小）的比值，然后在不同布局宽度下，先得到基准字体大小，再根据上面计算出来的比值，就可以计算出来不同布局宽度下的字体大小，也就是不同布局宽度下等比例缩放字体。

利用rem的特性，在页面的html标签上设置一个基准字体大小，就可以实现这种方式。

例如，宽是750px的设计图中，字体大小是32px，计算出基准字体大小为75px，比值为 32 * 10 / 75 = 0.426667。

如果布局宽度是414px，此时基准字体大小变成 414 / 10 = 41.4px，然后设置<html style="font-size:41.4px">，字体大小是0.426667rem，计算出来的字体大小为41.4x0.42667=17.66px。

如果布局宽度变成360px，此时基准字体大小变成36px，然后设置<html style="font-size:36px">，字体大小仍然用0.426667rem表示，计算出来的字体大小为36x0.42667=15.36px。

750/32 约等于 414/17.66 约等于 360/15.36，这样就做到了等比缩放字体了。

** 第2种字体适配方案优缺点**

缺点：1.小尺寸设备屏幕上字体显示小，大尺寸设备屏幕字体显示大，导致字体显示不一致；2.不能发挥大屏手机的优势（显示更多的字）；3.字体大小会出现奇数或者小数点大小的值，某些字体不支持这些值，渲染时增加计算量；

优点：1.适配简单，不同设备不会影响页面布局，可以和设计稿布局保持一致；

2.3布局宽度适配

布局中对宽度的适配，也是采用rem来实现，和上面第2种字体大小适配方式中的原理类似，也是计算出一个比例值，然后不同布局宽度中等比缩放，这里偷下懒，不在赘述。

3.适配解决方案分析

目前的解决方案有两类

第一类就是js动态生成viewport标签，标签中的initial-scale值根据设备的dpr计算，不同dpr设备的viewport值不同。

第二类就是js不操作viewport，每个设备都使用理想viewport来布局。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

** 动态viewport解决方案分析 **

这里分析两个动态viewport解决方案：

1.手机淘宝的flexible方案；
2.hotcss方案；

手机淘宝的flexible方案，特点：

1.仅针对iphone生成动态viewport，因为目前iphone的dpr只有1，2，3三种，android的dpr很有多种，不具有一致性；

2.字体大小不用rem做缩放处理，仍然使用px单位，设置不同dpr下对应的字体大小；

3.宽度利用rem等比缩放；

4.允许强制定义dpr;

使用时页面头部需要引入flexible.js.

hotcss方案，特点：

1.不区分iphone和android，dpr只取三种1,2,3，android的dpr做近似处理；

2.宽度以及字体利用rem等比缩放；

3.允许强制定义dpr;

使用时页面头部需要引入hotcss.js

动态viewport方案之所以会称为动态viewport是因为，这个适配过程会根据系统dpr值设置initial-scale属性的大小，大小等于1/dpr。

** 静态viewport解决方案分析 **

利用rem特性，先根据标注图算出各元素相对于设计稿宽度的比值，这个比值就作为rem值，然后页面布局时就用算出的rem值表示，并且在html根元素设置当前布局页面宽度作为基准。更rem值计算具体的解释可以参考这篇文章使用Flexible实现手淘H5页面的终端适配。通过这种方式设置标签元素的宽高，位置以及字体大小，这样利用rem特性就可以在不同手机屏幕上实现等比缩放。

参考资料
https://github.com/amfe/article/issues/17
http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html