viewport视口的概念

viewport视口的概念

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

总结：

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

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

参考：

https://developer.mozilla.org/en-US/docs/Glossary/Viewport

https://developer.mozilla.org/en-US/docs/Glossary/Visual_Viewport

https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport