viewport标准化设置

viewport标准化设置

viewport指视口，浏览器上(或一个app中的webview)显示网页的区域。PC端的视口是浏览器窗口区域，而移动端的则存在三个不同的视口：
layout viewport：布局视口
visual viewport：视觉视口
ideal viewport：理想视口
1. layout viewport 布局视口
在PC端的网页的layout viewport即浏览器页面显示的整个区域，也可以理解成网页的绘制区域。而在移动端由于其屏幕较小，无法全部显示PC端页面的全部内容，所以默认情况下(不用<meta name="viewport">去控制)，移动端会指定一个大于其浏览器显示区域layout viewport，一般是980px
2. visual viewport 视觉视口
visual viewport，顾名思义指浏览器可视区域，即我们在移动端设备上看到的区域。
3. ideal viewport 理想视口
所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。

1、设置viewport
<meta name="viewport"  />
2、属性配置
在规范中，meta viewport有6个属性（暂且把content中的那些东西称为一个个属性和值），如下：
width：设置layout viewport的宽度，为一个正整数，或字符串"width-device"
initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale：允许用户的最小缩放值，为一个数字，可带小数
maximum-scale：允许用户的最大缩放值，为一个数字，可带小数；
height：设置layout viewport的高度，这个属性对我们并不重要，很少使用
user-scalable：是否允许用户进行缩放，值为"no"|"yes",也可以用0和1表示，no表示不允许，yes表示允许；

语法：
<mata name="viewport" content="width=值,initial-scale=值,..." />
多个属性用逗号分隔开;

标准化适配要求:
1)网页的宽度与浏览器一致
2)保证网页内容的缩放比和PC端保持一致,视口的缩放比是1;
3)不允许用户自行缩放;

sublime,输入meta:vp + tab键后,自动生成可以适配移动端的配置,如下:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
device-width:表示当前设备的宽度,满足标准第1点;
user-scalable=no,表示不允许用户缩放,新华路标准第3点,initial-scale=1.0缩放比为1,满足第2点;