移动端开发-viewport

1.viewport

viewport 即设备 屏幕上显示网页的区域。因为移动设备屏幕比较小，为了能让移动设备能够显示更多内容，默认设置的viewport 并不是屏幕真是像素点的宽度，一般为980px 宽或者是其他值（不同的设备可能不一样），但带来的后果就是当网页过宽浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小。

2.像素和物理像素

说到像素和物理像素，就得说一下DPR（devicePixelRatio） 这个词了，DPR表示屏幕 “显示像素” 与 “物理像素” 的比值，一般电脑屏幕的 “独立像素” 等于 “物理像素”。

对于移动端来说，不同的设备 DPR也有所不同，例如同样是 360个物理像素宽度的屏幕 ，有可能能够显示的宽度为 720px 或者960px ,对应的dpr分别为720/360 和960/360。

3.使viewport === 设备物理像素宽度

使用meta标签锁定视口，强制viewport 等于设备宽度，这样一来，1px 显示出来就是1px 。

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

在html的head标签内添加这个meta标签后， 就可以强制让viewport 的width 等于设备宽度了 。

参数意义如下

width=device-width ： 强制让viewport 的width 等于设备宽度

initial-scale=1.0  ： 页面初始缩放值 ，1.0 即没有缩放

maximum-scale=1.0  ： 页面最大缩放值 

user-scalable=no   : 设置页面是否可以被用户缩放，yes 是可以 ，no 是不可以 

（完）