先动手
创建一个页面，一个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：是否允许用户手动缩放。
