移动端像素与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.body.clientWidth获取。
2. visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。
3. ideal viewport： 移动设备的理想viewport。

meta标签对viewport进行控制

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0 user-scalable=0">

属性名	备注
width	设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	允许用户的最小缩放值，为一个数字，可以带小数
height	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许 也可用”0”和”1”表示
target-densitydpi	值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个(安卓特有)