Viewport

一个移动专属的Meta值，用于定义视口的各种行为

layout viewport(布局视口)

视口的分辨率接近于PC显示器

visual viewport(视觉视口)

手持设备物理屏幕的可视区域

ideal viewport(完美视口)

它类似于布局视口，但宽度和视觉视口相同，用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过viewport meta的某种设置来达到

参数设置：

• width 控制Viewport的宽度,可以指定一个值或者设备的宽度,如device-width为设备的宽度(单位为设备缩放比例1:1的像素),这里设置的宽度等于设备宽度;
• initial-scale 初始缩放,即页面初始缩放程度.对应的值是一个浮点值,这里是一个乘积关系,页面呈现大小等于设置的宽度乘以initial-scale的值;
• maximum-scale 最大缩放,即允许用户缩放的最大比例,也是乘积关系.一般设置为1:1的比例不会让用户缩放的;
• minimum-scale 最小缩放,如上;
• user-scalable 用户是否可以手动缩放,一般值设为no,不允许用户缩放;

让viewport的宽度为设备宽度，在viewport中布局完成后显示在屏幕上时不缩放，即布局是怎样，显示就是怎样。这样我们在制作网页时只需要直接针对手机屏幕大小进行设计:

<meta name="viewport" content="width=device-width,initial-scale=1.0" />