浅谈meta viewport

viewport(视口)，在移动端有三个视口的概念。

1.layout viewport(布局视口)

如果移动设备上浏览器可视区域设为viewport,浏览器为了保证网页的正常显示，会给viewport设定一个值(980px或者1024它，或者其他值)，这个默认的viewport叫做 layout viewport。
layout viewport可以通过document.documentElement.clientWidth来获取。
2. visual viewport(虚拟视口)

visual viewport 是指浏览器可视区域的大小。可以通过document.documentElement.innerWidth来获取。
3. ideal viewport(完美视口)
ideal viewport是一个完美适配移动设备的viewport。首先，不需要缩放和滚动就能查看网页中的内容。其次，显示的文字，图片大小合适。

所以在写移动端的页面，会设置meta标签中viewport为完美视口

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

设置viewport宽度为ideal viewport的宽度，既可以设置width=device-width,也可以设置initial-scale=1 但有一个小缺陷，就是width=device-width会导致iphone、ipad横竖屏不分，initial-scale=1会导致IE横竖屏不分，都以竖屏的ideal viewport宽度为准。所以，最完美的写法两者都写上去， initial-scale=1 解决 iphone、ipad的缺陷，width=device-width解决IE的缺陷。

参考资料： https://blog.csdn.net/zhouziyu2011/article/details/60570547/