一个移动专属的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" />