移动开发屏幕适配分析
我在开发前端的时候曾经会有几个疑惑：
1）拿到的设计搞的宽度是640px或750px的，在页面不同尺寸屏幕布局的时候怎么换算。
2）移动端布局是用%、px、rem、伸缩盒 Flexible Box Layout还是多列Multi-column。
3）用px设置了字体大小，但是在ipad上面显示的却很小，字体大小是用rem比较好还是px+媒体查询比较好。
4）媒体查询@media分几个尺寸的范围能覆盖比较多的尺寸情况。
在分析适配问题之前，要先了解一些基础概念，Retina与HI-DPI、DPI与PPI、DP与PT、viewport等。
一、Retina显示屏
Retina Display是苹果注册的命名方式，其他厂商只能使用HI-DPI或者其他的命名方式，不过意思都是一样的，就是屏幕的PPI非常高。
 |
 |
| iPhone 3GS（非Retina屏幕） | iPhone 4（Retina屏幕） |
右边的图片明显要比左边的清晰，这是因为PPI要高，何为PPI。
1）PPI与DPI
PPI和DPI这两个是密度单位，不是度量单位。
1. PPI(pixels per inch)：图像分辨率 （在图像中，每英寸所包含的像素数目）【1英寸(in)=2.54厘米(cm)】
2. DPI(dots per inch)： 打印分辨率 （每英寸所能打印的点数，即打印精度）
PPI的计算方式如下，其中长度像素数和宽度像素数取的是物理像素（Physical Pixel）即设备像素。
PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数
这个物理像素不是说屏幕的大小，例如iPhone4的屏幕是320*480（这是DP/PT设备独立像素），但物理像素是640*960，屏幕是3.5寸。自己按下计算机算出来≈326。
在知乎上看到，还有一种比较复杂的PPI计算方法，考虑了观察者的距离，下图是一个极简版本：
上面又出现了几个概念，物理像素、DP、PT又是什么鬼？
2）物理像素（Physical Pixel）
物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。下图摘自《The Ultimate Guide To iPhone Resolutions》，原文是洋文写的，对应的中文可以看这里。
上图中iPhone 3GS的物理元素就是320*480，而4/4S是640*960。其中4/4S的320*480其实就是PT，而render中的2x就是dpr（设备像素比）。
3）DP、PT与SP
DP或PT是测量单位，DP（Density-independent pixels，也会叫DiP）表示独立于设备的像素点，PT（Point）表示点。
DP用在Android上，PT用在Apple上，但是他们本质上是相同的。
SP（Scale-independent pixel）和DP、PT从用途上来讲是不同的，但是工作方式相同。SP表示与比例无关的像素，通常用来定义字体大小。
这三个都是抽象像素，不会因为PPI的变化而变化，在相同物理尺寸和不同PPI下，他们呈现的高度大小是相同。也就是说更接近你手机看上去的大小，而px则不行。
上图摘自google的《Device metrics》，要浏览google的页面你懂得。表格中Density（密度）的基础单位，在Android上是mdpi，而在IOS中是1x。
4）CSS像素
CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。例如width:300px跟font-size:14px，这类css语句中的px。
CSS像素和物理像素（Physical Pixel）是容纳的关系。
例如iPhone4/4S中，1个CSS像素=4个物理像素（也叫设备像素）：
做个简单的例子，通过改变viewport，来手动放大屏幕。简单设置一个ul的CSS。
ul{ padding-left:20px; font-size: .5rem; }
1. 页面宽度等于屏幕DP或PT值
2. 页面宽度等于物理像素（Physical Pixel）
从两张图片中可以看到，同样是20px，看起来却有大小差别，上图比下图宽了一倍，与第一张图正好对应起来。
5）设备像素比(device pixel ratio)
设备像素比简称为dpr，其定义了物理像素（Physical Pixel）和DP/DiP（设备独立像素）【IOS中是PT（点）】的对应关系。
设备像素比 ＝ 物理像素（Physical Pixel） / 设备独立像素（DP/DiP或PT）
DP/DiP或PT与屏幕密度有关（屏幕密度需通过PPI计算出来）。
在JavaScript中，可以通过 window.devicePixelRatio 获取到当前设备的dpr。
而在CSS中，可以通过 -webkit-device-pixel-ratio ， -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询。
二、viewport
在桌面浏览器中，viewport就是浏览器窗口的宽度高度。
但移动设备的屏幕比桌面屏幕要小得多，为了要让网页在小尺寸的屏幕上显示正确，就需要对viewport做些处理。
需要把viewport分成两部分：visual viewport和layout viewport。
George Cummins在Stack Overflow上对这两个概念做了分析。大致意思如下：
把layout viewport想像成为一张大图。现在用一个比较小的框，通过它来看这张大图。在框内看到的部分就是visual viewport。框中的度量单位是CSS像素。
可以把这个框靠近一些（放大看局部）或靠远一些（缩小看整体）。也可以改变框的方向，但是大图layout viewport的大小和形状永远不会变。
1）visual viewport
visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分，或者通过缩放来改变visual viewport的大小。
结合上面的比喻，再想象一下大图和框的操作。
图片来自于文章《A tale of two viewports》，是用洋文写的，对应的中文可以看这里。
2）layout viewport
layout viewport就是页面原来的大小。
但是我们用在手机用浏览器打开PC的网页的时候，会看到网页被浏览器自动缩小了，变的太小会导致无法浏览内容。
3）viewport meta标签
为了不让浏览器自动缩小，引入了viewport元标签。通过这个元标签控制layout viewport的宽度。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
上面这段HTML经常会在移动端页面看到。
1. width：设置 layout viewport 的宽。
2. initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例，上面是变成设备的宽度，也就是layout viewport= DP或PT。
3. maximum-scale：允许用户缩放到的最大比例。
4. minimum-scale：允许用户缩放到的最小比例。
5. user-scalable：用户是否可以手动缩放。
 |
 |
| 浏览器自动缩放 | 添加了viewport |
注意下图片中的红色框，第二张图片内容超了出来，应该是给文字设置了宽度，并且这个宽度大于layout viewport导致了出来。但其实在Android和IOS中会有不一样的表现。
在文章《A tale of two viewports》中指出：
1. 通过 document.documentElement.clientWidth 获取 layout viewport 的宽度
2. 通过 window.innerWidth 获取 visual viewport 的宽度
我用iPhone6和红米 note在自己本地做了个获取这两个值的测试，设置了个宽度，撑开页面。
<div style="width: 700px"> //文字内容 </div>
1. 红米中的UC、微信浏览器、自带的浏览器还有移动端的Chrome，显示两个值都一样，是360px，只是UC和微信浏览器不会出现左右滚动条。
2. iPhone6中的UC浏览器和Safari显示两个值不一样，layout viewport 的宽度是375px，而visual viewport 的宽度是708px，不会出现滚动条。
4）ideal viewport
这个viewport的尺寸，我理解相当于DP/DiP（设备独立像素）或PT的尺寸。
在文章《Meta viewport》有详细的说明，如果洋文看起来吃力，可以选择浏览中文版的。
visual viewport宽度 = ideal viewport宽度/ zoom factor
zoom factor其实就是meta中的“initial-scale”。
设置initial-scale后，就开始相对于ideal viewport进行计算产生visual viewport，用visual viewport的宽度值去设置layout viewport的宽度值。
注意，刚刚用iPhone6测试获取到layout viewport与visual viewport不同，一开始应该是相同的，只是后面渲染的时候style="width: 700px"把visual viewport给撑大了。
如果你拿到的设计稿是640px宽度的，在你用iPhone5布局的时候，其实你可以initial-scale=0.5，将layout viewport放大到640px，接下布局可以通过rem来设置。
但是手机屏幕的尺寸各不相同，那么initial-scale的值也应该是不同的，这个值是可以通过JavaScript计算出来的，可以参考flexible.js（移动自适应方案）中的代码。
三、flexible.js
打开手机淘宝页面，可以看到里面内联了这个库的代码，这个flexible.js库就是用来解决H5页面终端适配的，具体的使用方法可以参考这里。
1）rem
rem 就是相对于根元素 <html> 的 font-size 来做计算。flexible.js会给html赋font-size的值。下面的代码是在iPhone5中模拟。
使用方法中并不推荐字体用rem单位，但我觉得可以因地制宜，具体情况具体分析，比如要在iPad中适配，这个时候用rem体验会比较好。
2）计算initial-scale
注意下面的Android设备一律dpr=1，我后面做了个简单的测试。
1 var devicePixelRatio = win.devicePixelRatio; 2 if (isIPhone) { 3 // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 4 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 5 dpr = 3; 6 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { 7 dpr = 2; 8 } else { 9 dpr = 1; 10 } 11 } else { 12 // 其他设备下，仍旧使用1倍的方案 13 dpr = 1; 14 } 15 scale = 1 / dpr;
将第2行修改下代码，通过正则匹配来判断dpr的值。
var isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g); if (isRegularDpr) { //...逻辑与上面相同 }
在IOS中表现正常，可是在Android中的UC、Chrome浏览器中会放大，微信浏览器显示正常。顺便说下，我的手机是红米note，物理像素是720px，DP（设备独立像素）是360px。
 |
 |
 |
| 修改前 | 修改后 | 添加target-densitydpi=device-dpi |
| CSS像素是360px | CSS像素是720px | CSS像素是720px |
第二和第三都是720px，宽度都变大了，只是一个是通过“initial-scale=0.5”，另一个是通过“target-densitydpi=device-dpi”。但字体一张变大一张变小了。
造成两种展现不一样的原因，我的理解是，第一种1个CSS像素=4个物理像素，而第二种是1个CSS像素=1个物理像素。
Android的viewport中属性“target-densitydpi”，这个“DPI”就相当于“PPI”，我的红米note的“PPI”是267。
可以的取值如下：
device-dpi： 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。 high-dpi： 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。 medium-dpi： 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density. low-dpi： 使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。 <value>： 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
有一篇文章《Viewport target-densitydpi support》曾经讲到，这个属性将被废弃。
3）viewport元标签
如果在页面中已经设置了元标签，那么就读取元标签中的内容，如果没有设置，就动态添加meta标签到head中。
4）refreshRem函数
此函数就是在设置html中font-size，以及flexible.rem与win.rem的值，flexible.rem会在后面的两个辅助方法refreshRem和px2rem内用到。
docEl.getBoundingClientRect().width是为了获得 visual viewport 的宽度。
这个540其实是个经验值，参考Issues#12，目前主流手机最大的css像素尺寸，是540（比如devicePixelRatio为2，分辨率是1080x1920的手机）。
width / dpr 是因为前面添加了viewport后，width会根据dpr（设备像素比）改变，而540定义的是一个DP/DiP（设备独立像素）或PT值。
width / 10 主要为了以后能更好的兼容 vh 和 vw。
function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }
5）pageshow与DOMContentLoaded
pageshow事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
页面文档完全加载并解析完毕之后，会触发DOMContentLoaded事件，HTML文档不会等待样式文件，图片文件，子框架页面的加载。
jQuery中的ready方法就是基于这个事件编写的，查看ready源码。
现在我自己来解答一下自己的疑惑：
1）通过修改initial-scale的值，然后配合rem来做换算，可以参考flexible.js中计算方式。
2）这几种布局应该是配合使用，因地制宜，我前面的一篇文章中就记录使用了多列与伸缩盒的使用场景。
3）还是一样，要结合媒体查询与rem或px，因地制宜。
4）这个范围，目前我还不能确定，还没有做过详细的实验。
参考资料：
移动端前端开发中需要知道的一些屏幕知识
设计师DPI指南(翻译)
理解flexible.js所需的viewport知识
使用Flexible实现手淘H5页面的终端适配
dp、sp、px傻傻分不清楚
移动端H5页面高清多屏适配方案
A tale of two viewports
关于移动端 rem 布局的一些总结
移动端页面布局及字体大小该如何设置
web app变革之rem
苹果的 Retina 屏幕一定需要突破 326 PPI 吗？还是跟距离相关？
Retina显示屏
(翻译)第三种viewport-ideal viewport
