viewport

1.2 viewport

1.2 meta viewport 是做什么用的，怎么写？

• viewport 指 web 页面上用户的可见区域。

1.2.1 viewport 常用属性：

width：控制 viewport 的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：与 width 相对应，指定 viewport 高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：是否允许用户手动缩放。

1.2.2 viewport 分哪几类？

• 视觉视窗
  是用户通过屏幕所看到的页面内容。但它所对应的并不是指屏幕区域里的物理像素，而是 CSS 像素。
  

• 布局视窗
  跟视觉视窗不一样，它不是指设备屏幕区域，它是为了解决 PC 端网站在移动端显示不佳的一个解决方案。布局视窗通常比设备屏幕宽得多，一般为 980px，但也不是唯一，在不同的浏览器中也会有所不同如：在 Safari iPhone 中布局视窗的宽为 980px，在 Opera 中布局视窗宽为 850px ，在 Android WebKit 中而已视窗宽为 800px，而在 IE 中布局视窗宽为 974px。
  

• 理想视窗
  理想视窗就是把布局视窗调整到合适的状态，让页面有最好的表面效果，这也是它名字的由来。设置了理想视窗用户就不再需要对页面进行缩放，因为浏览器已经帮你把页面调整到最佳的显示状态了。而你要做的就是告诉浏览器，你要他这么做就 OK 了。就下面这一段代码就可以让浏览器乖乖地把布局视窗调整到最理想的状态
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">