定义
viewport，译为视口，它指当前可见的计算机图形区域。在WEB浏览器中泛指与浏览器窗口相同，但不包括浏览器自身的UI、滚动条的部分，即指你正在浏览的文档的那一部分。严格来说，视口分为视觉视口和布局视口。
类型
-
视觉视口 visual viewport
当前浏览器的文档可见部分，并且可以变化(如触屏双指缩放和放大、动态键盘)，它不包括屏幕键盘、滚动条。可通过window.visualViewport查看视口信息。只有最上层的 window 才有视觉视口（visual viewport）这一概念。因此只有最上层 window 的
VisualViewport属性才是有效的，其他层的视觉视口属性可看作是布局视口属性的别名。 -
布局视口 layout viewport
布局视口是浏览器在其中绘制网页的视口，其内容均可以自定义样式，本质上，它代表可以看到的内容。window.innerHeight 和 window.innerWidth所组成的区域即是布局视口，其中 position: fixed绝对定位、vw/vh等是基于此视口的。
还可以通过document.documentElement.clientWidth、document.documentElement.clientHeight 来查看布局视口的宽高(此时不包含滚动条)。
