viewport学习

先动手

创建一个页面，一个DIV宽200高100。不添加viewport。

添加Viewport标签 <meta name="viewport" content="width=device-width,inital-scale=1,minimum-scale,maximum=1,user-scalable=no">

通过设置viewport宽度等于设备宽度。不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放。

viewport概念

viewport是设备上用来显示网页的那一块区域比屏幕宽。手机浏览器把网页放入到一个虚拟的“窗口（viewport）”中。用户可以通过平易或收缩看不同部分。

viewport理解

viewport以手机端chrome为例可视区域宽度为968px，是一个固定值。

参数

<meta name="viewport" content="width=device-width,inital-scale=1,minimum-scale,maximum=1,user-scalable=no">

width：控制 viewport 的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：与 width 相对应，指定viewport 高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：是否允许用户手动缩放。