移动端开发-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 是不能够 （完）