viewport来源

通常为了使得网页能够成为响应式的，我们需要在head内声名有关viewport的meta。
它长这样

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

viewport的设计是由于pc互联网向移动互联网的过渡。在过去，多数文档被设计用来在pc上进行阅读，而pc的设备通常比较宽，同样的网页不进行任何改变放到移动端的话，内容就会变得无法辨认。

例如，新浪网在移动端的显示：

为了避免这个问题，浏览器通常使用一个固定的初始区域宽度来模拟桌面浏览器窗口大小（通常980px-1024px)。而移动端的宽度是小于这个值的，于是内容便看起来像自动放大了一般，同样的，移动端当前的屏幕也只会显示文档的一部分。

document.documentElement.clientWidth/Height 返回的即是当前布局视口的尺寸
window.innerWidth/Height 返回的即是当前视觉视口的尺寸

由上述描述所知，其实视觉视口的大小和文档缩放程度是逆相关的：放得越大，视觉视口越小

浏览器对viewport也有默认布局视口宽度

iPhone	iPad	Android Samsung	Chrome	Opera	BlackBerry	IE
980	980	980	980	980	1024	1024

即使如此，对于一个用户而言，还是不甚理想，在狭窄的屏幕上更适合一个狭窄的网站而不是需要用户来缩放的桌面网站。于是Safari引入了meta标签viewport以及理想视口的概念，其它浏览器厂商也纷纷跟进。

只有当网站是为移动端准备的时候才应该使用理想视口。
只有主动地往页面里添加meta视口标签时理想视口才会生效。
如果没有meta视口标签声明，那么布局视口将会维持它的默认宽度，理想视口只有当显式地使用它的时候才会产生影响。
理想视口只和设备有关，由浏览器定义，因此同一设备上的不同浏览器拥有不同的理想视口。
以下代码告之浏览器，布局视口的宽度应该与理想视口的宽度一致：

<meta name="device" content="width=device-width">

screen.width/height 返回的是理想视口的尺寸

viewport取值

值	可能值	描述
width	一个正整数或者字符串 device-width	以pixels（像素）为单位， 定义viewport（视口）的宽度。
height	一个正整数或者字符串 device-height	以pixels（像素）为单位， 定义viewport（视口）的高度。
initial-scale	一个0.0 到10.0之间的正数	定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
maximum-scale	一个0.0 到10.0之间的正数	定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
minimum-scale	一个0.0 到10.0之间的正数	定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。
user-scalable	一个布尔值（yes 或者no）	如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。