桌面浏览器上的 viewport-原创手记-慕课网

viewport 是浏览器视口，代表浏览器的可视区域，也就是浏览器中用来显示网页的那部分区域。在桌面电脑上，由外到内分为显示器窗口、浏览器窗口、浏览器视口 (viewport)、<html> 元素、<body> 元素、其它元素。

显示器窗口

显示器窗口就是你的显示器屏幕的可见区域。显示器的分辨率，描述的是显示器窗口的设备像素，又叫做物理像素，通过 screen.width 来表示水平方向的物理像素，screen.height 来表示垂直方向的物理像素。比如一台分辨率为 1920 * 1080 的显示器，它的 screen.width 为 1920，screen.height 为 1080。screen.width 和 screen.height 是固定的，不可以改变。

浏览器窗口

浏览器窗口就是浏览器中用来显示网页的可见区域，不包括工具栏的部分，但是包括水平滚动条和垂直滚动条 (只包括滚动条本身所占的像素，不包括已滚动的网页部分)。

webp

桌面浏览器窗口.png

上图中，画红线的部分代表的就是浏览器的窗口，注意包括右侧的滚动条。

通过 window.innerWidth 来表示浏览器窗口水平方向能够显示的 CSS 像素数，window.innerHeight 来表示浏览器窗口垂直方向能够显示的 CSS 像素数。由于桌面设备上，1 个 CSS 像素由 1 个物理像素来渲染，所以当浏览器占满整个显示屏幕宽度的时候，window.innerWidth 就等于 screen.width。window.innerWidth 和 window.innerHeight 是可变的，通过拉伸或者缩放浏览器可以改变。

浏览器视口

viewport 就是浏览器视口，浏览器视口和浏览器窗口类似，只不过不包括水平滚动条和垂直滚动条。如果网页里没有滚动条，则浏览器视口和浏览器窗口的大小一样。

webp

桌面浏览器视口.png

上图中，画红线的部分代表的就是桌面浏览器的视口，也就是 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>` 元素

HTML 文档中，<html> 元素是文档根元素，通过 document.documentElement 来表示 <html> 元素。<html> 元素所占的 CSS 宽度和高度，用 document.documentElement.offsetWidth 和 document.documentElement.offsetHeight 来显示。<html> 元素默认的宽度为 100%，默认高度为 auto。viewport 可以看做 <html> 元素的父容器，<html> 元素的 width: 100%，这里就是相对于 viewport 的百分比，也就是说，默认情况下，<html> 元素的宽度和 viewport 的宽度一样。

`<body>` 元素

<body> 元素的父元素是 <html> 元素，所有区块元素默认的 width 都为 100%，默认的 height 都为 auto，因此如果网页里没有内容的时候，经常会出现页头和页脚合在一起的情况。我们可以给 <html> 和 <body> 元素设置一个 height，来撑开网页。

html,body {  height: 100%;
}/*或者*/body {  min-height: 100vh; /* 这里的 vh 代表 viewport height 的意思，100vh 就是 100% viewport height */}

这样，<html> 和 <body> 元素的高度都等于 viewport 的高度。

拉伸收缩浏览器

通过鼠标拉伸收缩浏览器的时候，改变了浏览器的物理尺寸。viewport 所能够展示的 CSS 像素数就会改变，因此 document.documentElement.clientWidth 和 window.innerWidth 就会改变。

缩放浏览器

通过百分比缩放浏览器的时候，并没有改变浏览器的物理尺寸，但是改变了 CSS 像素的物理尺寸。viewport 所能够展示的 CSS 像素数也会发生改变，因此 document.documentElement.clientWidth 和 window.innerWidth 就会改变。

比如我们把显示器放大到 200%，网页中的元素尺寸都放大一倍，但是元素的 CSS 像素值不会改变。比如某个元素的 width: 100px;，不管是浏览器放大显示还是缩小显示，该元素的 CSS 像素是不会变的，永远都是 width: 100px;，变化的是该元素在显示器上所占的物理尺寸。当浏览器放大 200% 显示网页的时候，1px CSS 像素的物理尺寸也会放大一倍。

如下图所示，假设浏览器 viewport 宽度为 1000px，也就是说 viewport 水平方向能够展示的 CSS 像素数为 1000px，那么某个元素 width: 1000px 就会占满整个 viewport。

webp

原尺寸.png

点击浏览器的放大按钮放大到 200% 显示网页的时候，虽然浏览器的物理尺寸没有变化，但是 1px CSS 像素的物理尺寸扩大了一倍，因此浏览器 viewport 能够展示的 CSS 像素数就会缩小一倍。因此不缩放时，viewport 为 1000px，放大 200% 之后，viewport 为 500px，也就是说放大后 viewport 水平方向能够展示的 CSS 像素数为 500px。

webp

放大.png

同理，点击浏览器的缩小按钮缩小到 50% 显示网页的时候，viewport 为 2000px，也就是说缩小后 viewport 水平方向能够展示的 CSS 像素数为 2000px。

webp

缩小.png

媒体查询

在桌面浏览器上，媒体查询中的 width height，代表浏览器的 viewport 的宽度和高度，也就是 document.documentElement.clientWidth 和 document.documentElement.clientHeight。

@media (min-width: 900px) {  body {    color: red;
  }
}

上面的代码表示，当 viewport >= 900px 的时候，字体颜色为红色。

在桌面浏览器上，媒体查询中的 device-width device-height，代表显示器的物理像素，也就是 screen.width 和 screen.height。

@media (min-device-width: 900px) {  body {    color: red;
  }
}

上面的代码表示，当显示器分辨率宽度 >= 900px 的时候，字体颜色为红色。我们一般不会用到 device-width 和 device-height。

作者：Karmack
链接：https://www.jianshu.com/p/ea73007fe15d