布局视口

浏览器厂商为移动端设计了一个容器,宽980px,用这个容器去承接PC端的网页,然后等比例缩放到手机的宽度,优点是能看到网页全貌,缺点是内容特别小,需要用手放大查看
移动端获取布局视口方式:document.documentElement.clientWidth

image.png

视觉视口

用户的可见区域,它的绝对宽度和设备屏幕一样宽
移动端获取视觉视口方式:window.innerwidth(跟PC端的不一样)
image.png

理想视口标准

是与屏幕等宽的布局视口
image.png
设置理想视口的方法:
<meta name="viewport" content="width=device-width"/>