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/