移动端像素与viewPort

viewport是什么？

设备屏幕上能用来显示网页的哪一块区域。具体点说 ，就是浏览器或APP的webview用来显示网页的那部分区域。

css中的像素与设备的物理像素

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在移动设备上，必须明白这点。安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。用户缩放也会引起css中px的变化。
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题。

三个viewport

1. layout viewport 是网页的全部内容，它可以全部或部分的展示给客户。layout viewport 的宽度一般是大于浏览器可视区域的宽度的。可通过document.documentElement.clientWidth获取。IE浏览器是通过document.