以前还没有做过移动端的开发，看到一篇有关移动端适配的博文，记录一波以供参考。
像素
设备像素
屏幕的物理像素，固定不变
CSS像素
一个CSS像素代表多少屏幕像素，由屏幕像素密度、缩放比例决定。
分辨率
1136 x 640，屏幕垂直1136像素，水平640像素。
屏幕尺寸
4英寸，屏幕对角线长度
视口
桌面浏览器中，浏览器窗口就是约束你的CSS布局视口（又称初始包含块）。它使所有CSS百分比宽度推算的根源，它的作用是CSS布局限制了一个最大宽度，视口的宽度和浏览器窗口宽度一致。
但是在移动端，情况有所不同。
布局视口
layout viewport
用于初始包含块、媒体查询，可由document.documentElement.clientWidth/clientHeight得到，即html元素尺寸。
对桌面浏览器，即窗口物理尺寸。
1 | @media (min-width: 700px){ |
对不设viewport的手机端，布局视口不与屏幕相关联，由浏览器设定，一般980px。
视觉视口
visual viewport
视觉视口是用户正在看到的网页的区域，大小是屏幕显示的CSS像素的数量。
window.innerWidth/Height返回视觉视口的尺寸。
对桌面浏览器，即窗口物理尺寸。在body内容没有超出时，手机端由document.body.clientWidth决定，从而尽量使窗口可以显示body全部内容，对不设viewport的有980px，1440px两档，而设viewport后，直接等于body尺寸。
理想视口
ideal viewport
浏览器规定了理想视口尺寸，即屏幕宽度，以下可设置布局视口为理想视口尺寸。
1 | <meta name="viewport" content="width=device-width"> |
screen.width/height返回理想视口的尺寸。
缩放
影响
缩放的是CSS像素的大小，放大后，一个CSS像素跨域更多物理像素。
用户缩放时，各数值都不会变，只会在initial-scale改变时调整。
缩放比例
zoom-level = screen.width / window.innerWidth
放大时，能显示的范围更小。
禁止缩放
1 | <meta name="viewport" content="user-scalable=no"> |
设置缩放
1 | <meta name="viewport" content="initial-scale=1"> |
同时也会将布局视口的尺寸设置为缩放的尺寸，所以initial-scale=1与width=device-width的效果是一样的。
最终结果
1 | <meta name="viewport" content="width=device-width,initial-scale=1"> |
解决兼容性。
总结
| 种类 | 屏幕尺寸 | html | body(150%) | window |
|---|---|---|---|---|
| 桌面 | 980 | 980 | 1470 | 980 |
| 移动 | 360 | 980 | 1470 | 1440 |
| 移动（viewport） | 360 | 360 | 540 | 540 |
总之，桌面端布局视口(html)，视觉视口(window)都等于屏幕宽度；移动端不设viewport时，html有固定值980，window有980，1440，显示尽可能多内容；设viewport时，html与屏幕相等，window与内容相同。
