viewport理解
viewport概念
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，窗口可大于或小于手机的可视区域，一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分。
下图列出了一些设备上浏览器的默认viewport的宽度。
viewport分类
-
layout viewport
可以理解为内容展示所需要实际区域， 通过document.documentElement.clientWidth 来获取
-
visual viewport
用户可视范围，受限于设备，通过window.innerWidth 来获取
-
ideal viewport
在visual viewport基础上添加的概念--移动设备的理想viewport,不需要用户缩放和横向滚动条就能正常的查看网站的所有内容,文字的大小是合适.它没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。
不同分辨下的ideal viewport可能一样
viewport控制
Mobile Safari 引入了”viewport元标签“来让web开发者控制视口的尺寸及比例。具体使用meta标签
一个典型的针对移动端优化的站点包含类似下面的内容:
<code>
<-meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</code>
设置参数讲解如下:
其中，这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
viewport动态改变
- 方案一
可以使用document.write来动态输出meta viewport标签
<code>
document.write('<-meta name="viewport" content="width=device-width,initial-scale=1">')
</code>
- 方案二
通过setAttribute来改变
<pre>
<meta id="testViewport" name="viewport" content="width = 380">
<-script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
<-/script>
</pre>
参考文章
2.MDN:在移动浏览器中使用viewport元标签控制布局
3.屏幕参数理解
4.屏幕尺寸
