viewport视口的概念

概念详见 MDN，我摘出来对比了下，如下图：

总结：

viewport就是当前窗口的可视部分
Visual Viewport 视觉视口就是视口viewport中的可见部分
- 比如在mobile浏览器中，输入时，弹出的键盘，会让 Visual Viewport变小
- 而在该情况下， Layout viewport布局视口是不变的
- 这就是 Visual Viewport视口有时会比 layout viewport视口小的原因
Layout viewport 布局视口，就是网页布局的视口

只要记住，在手机浏览器中输入内容时弹出键盘，这是Visual Viewport高度变小了，而Layout viewport布局视口没变，概念就很容易理解了。用例子来理解概念。

参考：