视口总结

视口又称为虚拟容器，即viewport。移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的区域。视口的宽度是人为规定的，默认为980px，我们可以通过meta标签修改视口的宽度，只要设置好视口的大小，页面内容在手机上就不会被压缩。
视口分为layout viewport，visual viewport，ideal viewport三种，layout viewport 又称为布局视口，在移动设备上，布局视口会远大于设备的宽度，visual viewport即视觉视口，是用户看到的区域，缩放可以改变其视觉大小，但无论如何缩放，都不会影响布局视口的宽度。ideal viewport为理想视口，是指布局视口的一个理想尺寸，只有当布局视口的宽度等于设备屏幕尺寸时，才是理想视口。其中，布局视口会限制css布局，视觉视口决定用户看到的网站内容，同时可以把布局视口尺寸定义为理想视口，这也是响应式设计的基础。