viewport 是浏览器视口，代表浏览器的可视区域，也就是浏览器中用来显示网页的那部分区域。在桌面电脑上，由外到内分为显示器窗口、浏览器窗口、浏览器视口 (viewport)、 元素、 元素、其它元素。
显示器窗口
显示器窗口就是你的显示器屏幕的可见区域。显示器的分辨率，描述的是显示器窗口的设备像素，又叫做物理像素，通过 screen.width 来表示水平方向的物理像素，screen.height 来表示垂直方向的物理像素。比如一台分辨率为 1920 * 1080 的显示器，它的 screen.width 为 1920，screen.height 为 1080。screen.width 和 screen.height 是固定的，不可以改变。
浏览器窗口
浏览器窗口就是浏览器中用来显示网页的可见区域，不包括工具栏的部分，但是包括水平滚动条和垂直滚动条 (只包括滚动条本身所占的像素，不包括已滚动的网页部分)。
通过 window.innerWidth 来表示浏览器窗口水平方向能够显示的 CSS 像素数，window.innerHeight 来表示浏览器窗口垂直方向能够显示的 CSS 像素数。由于桌面设备上，1 个 CSS 像素由 1 个物理像素来渲染，所以当浏览器占满整个显示屏幕宽度的时候，window.innerWidth 就等于 screen.width。window.innerWidth 和 window.innerHeight 是可变的，通过拉伸或者缩放浏览器可以改变。
浏览器视口
viewport 就是浏览器视口，浏览器视口和浏览器窗口类似，只不过不包括水平滚动条和垂直滚动条。如果网页里没有滚动条，则浏览器视口和浏览器窗口的大小一样。
通过 document.documentElement.clientWidth 来表示浏览器视口水平方向能够显示的 CSS 像素数，document.documentElement.clientHeight 来表示浏览器视口垂直方向能够显示的 CSS 像素数。如果没有滚动条，document.documentElement.clientWidth 和 window.innerWidth 相等。如果有滚动条，window.innerWidth = document.documentElement.clientWidth + 垂直滚动条所占的宽度。document.documentElement.clientWidth 和 document.documentElement.clientHeight 是可变的，通过拉伸或者缩放浏览器可以改变。
元素
HTML 文档中， 元素是文档根元素，通过 document.documentElement 来表示 元素。 元素所占的 CSS 宽度和高度，用 document.documentElement.offsetWidth 和 document.documentElement.offsetHeight 来显示。 元素默认的宽度为 100%，默认高度为 auto。viewport 可以看做 元素的父容器， 元素的 width: 100%，这里就是相对于 viewport 的百分比，也就是说，默认情况下， 元素的宽度和 viewport 的宽度一样。
元素
<body> 元素的父元素是 <html> 元素，所有区块元素默认的 width 都为 100%，默认的 height 都为 auto，因此如果网页里没有内容的时候，经常会出现页头和页脚合在一起的情况。我们可以给 <html> 和 <body> 元素设置一个 height，来撑开网页。拉伸收缩浏览器
通过鼠标拉伸收缩浏览器的时候，改变了浏览器的物理尺寸。viewport 所能够展示的 CSS 像素数就会改变，因此 document.documentElement.clientWidth 和 window.innerWidth 就会改变。
缩放浏览器
通过百分比缩放浏览器的时候，并没有改变浏览器的物理尺寸，但是改变了 CSS 像素的物理尺寸。viewport 所能够展示的 CSS 像素数也会发生改变，因此 document.documentElement.clientWidth 和 window.innerWidth 就会改变。
缩放、调整浏览器窗口改变的只是浏览器视口（viewport ）
比如我们把显示器放大到 200%，网页中的元素尺寸都放大一倍，但是元素的 CSS 像素值不会改变。比如某个元素的 width: 100px;，不管是浏览器放大显示还是缩小显示，该元素的 CSS 像素是不会变的，永远都是 width: 100px;，变化的是该元素在显示器上所占的物理尺寸。当浏览器放大 200% 显示网页的时候，1px CSS 像素的物理尺寸也会放大一倍。
而一个物理像素只能展示0.5pxCSS像素
浏览器视口所拥有的物理像素是不变的，物理像素代表多少个CSS像素变化了（像素比），用上面的例子说明，放大200%；1个物理像素只能代表0.5PX CSS像素，假设在没有缩放的情况下，浏览器视口满屏宽度为100px; 再放大后，浏览器视口满屏宽度为50px;因为像素比变化了；
手机浏览器上的layout viewport和visual viewport
layout viewport
layout viewport是网页布局的区域，它是元素的父容器。只要你不在css中修改元素的宽度，元素的宽度就会撑满layout viewport的宽度。
很多时候浏览器窗口没有办法显示出layout viewport的全貌，但是它确实是已经被加载出来了，这个时候滚动条就出现了，你需要通过滚动条来浏览layout viewport其他的部分。
layout viewport用css像素来衡量尺寸，在缩放、调整浏览器窗口的时候不会改变。缩放、调整浏览器窗口改变的只是visual viewport。
但是在移动端，缩放为100%的时候，Layout Viewport不一定等于内容窗口的大小。当你用手机浏览浏览宽大的网页（这些网页没有采用响应式设计）的时候，你只能一次浏览网页的一个部分，然后通过手指滑动浏览其他部分。这就说明整个网页（Layout Viewport）已经加载出来了，只不过你要一部分一部分地看。
visual viewport
visual viewport就是显示在屏幕上的网页区域。通过前面的说明你应该已经知道visual viewport了：它往往只显示layout viewport的一部分。visual viewport就像一台摄像机，layout viewport就像一张纸，摄像机对准纸的哪个部分，你就能看见哪个部分。你可以改变摄像机的拍摄区域大小（调整浏览器窗口大小），也可以调整摄像机的距离（调整缩放比例），这些方法都可以改变visual viewport，但是layout viewport始终不变。
visual viewport用css像素来衡量尺寸，表示有多少个css像素能够被用户看到。