移动端屏幕自适应的学习-基本概念篇2

移动端页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：

首先得了解下面这些基本概念(术语)
视窗 viewport
简单的理解，viewport是严格等于浏览器的窗口。在桌面浏览器中，viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。
移动端的viewport太窄，为了能更好为CSS布局服务，所以提供了3viewport:

虚拟窗口（layout viewport）
移动浏览器默认情况下把 viewport 设置为一个比较宽的值（防止太窄而在可视区域中显示错乱）。该默认的 viewport 称为 layout viewport。
宽度可通过 Js 获取(基本所有设备都支持)

document.documentElement.clientWidth
document.documentElement.clientHeight
视觉窗口（visual viewport）
浏览器可视区域大小。可理解为手机物理屏幕。
宽度可通过 Js 获取(不支持Android2, Opera Mini, UC8)
window.innerWidth
window.innerHeight
理想 viewport
由Peter-Paul Koch提出的一种概念，一个完美适配移动设备的 viewport。理想状态是不需要用户缩放和横向滚动条就能正常查看，显示的文字大小合适，不区分分辨率，屏幕密度等。

而事实上viewport是一个很复杂的知识点，上面的简单描述可能无法帮助你更好的理解viewport，而你又想对此做更深的了解，可以阅读PPK写的相关教程(前端Web手册)。

物理像素(physical pixel)
物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

DPR

DPR(Device Pixel Ratio) = 物理像素/逻辑像素； 
dpr可以通过window.devicePixelRatio获得； 
在不存在缩放的情况下： 
pc的dpr一般为1，即css中1px对应1px物理像素； 
ip6的pdr为2，即css中1px对应2px物理像素； 
ip6plus的pdr为3，即css中1px对应3px物理像素； 
但是对于安卓，有一些奇葩的dpr。 
dpr所带来的影响： 
图片的尺寸一般要为显示尺寸 * dpr 
设计稿中的1px边框需要设置为0.5px

width与device-width

使用媒体查询设置小屏断点时要注意区分width与device-width。 
在desktop上使用device-width时，不管浏览器如何缩小都是不会相应的。 
而使用width是会适配浏览器缩小，但是，如果移动端页面是根据width来做，那么在电脑上缩小浏览器也可以看到移动端页面。 
其实就是要区分width和device-width。 
width：指的是浏览器的宽。 
device-width：指的是设备屏幕的宽，设备屏幕的宽在同一设备上是不会变的。 
有两个操作会影响width，一是缩小浏览器，二是设置缩放比例。 
因此在分辨率2560px，dpr为2的imac，它的device-width一般是1280px，但系统一般都会针对这种情况默认设置缩放比例，例如缩放比为150%。那么实际上它的device-width就是1707px，满屏情况下width也是1707px。