视窗概念

本文解释了视窗的概念——它是什么、它在 CSS、SVG 和移动设备方面的影响，并区分了视觉视窗和布局视窗。

什么是视窗？

视窗表示计算机图形中当前正在查看的区域。在网页浏览器术语中，它通常与浏览器窗口相同，不包括 UI、菜单栏等。这是您正在查看的文档的一部分。

像本文这样的文档可能非常长。您的视窗是当前可见的任何内容，特别是“什么是视窗”部分，以及可能的一些导航菜单。视窗的大小取决于屏幕的大小，浏览器是否处于全屏模式，以及用户是否放大。视窗之外的内容，例如本文档中的“另请参阅”部分，可能在滚动到视图之前不会显示在屏幕上。

  • 在应用程序并非始终全屏的大型显示器上，视窗是浏览器窗口的大小。
  • 在大多数移动设备上以及浏览器处于全屏模式时，视窗是整个屏幕。
  • 在全屏模式下，视窗是设备屏幕，窗口是浏览器窗口，可以与视窗一样大或更小，文档是网站，可以比视窗高或宽得多。

概括来说，视窗基本上是文档中当前可见的部分。

视窗大小是可变的

视窗的宽度并不总是窗口的宽度。如果您在 Chrome 或 Firefox 中查询窗口和文档的宽度或高度，您可能会得到

js
document.documentElement.clientWidth; /* 1200 */
window.innerWidth; /* 1200 */
window.outerWidth; /* 1200 */
js
document.documentElement.clientHeight; /* 800 */
window.innerHeight; /* 800 */
window.outerHeight; /* 900 */

有几个 DOM 属性可以帮助您查询视窗大小和其他类似长度

  • 文档元素的 Element.clientWidth 是文档的内部宽度，以 CSS 像素 为单位，包括内边距（但不包括边框、外边距或垂直滚动条，如果有）。这就是视窗宽度。
  • The Window.innerWidth is the width, in CSS pixels, of the browser window viewport including, if rendered, the vertical scrollbar.
  • The Window.outerWidth is the width of the outside of the browser window including all the window chrome.

In an experiment with these, the innerWidth and outerWidth was seen to be the same, but the outerHeight was 100px taller than the innerHeight. This is because the outerHeight includes the browser chrome: measurements were taken on a browser with an address bar and bookmarks bar totalling 100px in height, but no chrome on the left or right of the window.

The area within the innerHeight and innerWidth is generally considered the layout viewport. The browser chrome is not considered part of the viewport.

当放大时，Firefox 和 Chrome 都会报告 innerWidth 和 clientWidth 的新 CSS 像素大小。outerWidth 和 outerHeight 返回的值取决于浏览器：Firefox 报告新值以 CSS 像素为单位，但 Chrome 返回默认像素大小的长度。放大时，您可能会得到

js
document.documentElement.clientWidth; /* 800 */
window.innerWidth; /* 800 */
window.outerWidth; /* 800 in Firefox, 1200 in chrome */
js
document.documentElement.clientHeight; /* 533 */
window.innerHeight; /* 533 */
window.outerHeight; /* 596 in Firefox, 900 in chrome */

视窗最初为 1200 x 800 像素。放大后，视窗变为 800 x 533 像素。这是布局视窗。具有以下样式的粘性页眉或页脚将分别粘贴到布局视窗的顶部和底部。

css
body > header {
  position: fixed;
  top: 0;
}
body > footer {
  position: fixed;
  bottom: 0;
}

我们使用键盘放大时获得了 800 x 533 的测量值。页眉和页脚保持与窗口顶部和底部的对齐。但如果我们在平板电脑上捏缩放呢？如果手机上弹出一个动态键盘呢？

网页包含两个视窗，布局视窗和视觉视窗。视觉视窗是网页中当前在浏览器中可见的部分，并且可以更改。当用户捏缩放页面、弹出动态键盘或先前隐藏的地址栏变为可见时，视觉视窗会缩小，但布局视窗保持不变。

如上所述，粘性页眉或页脚粘贴到布局视窗的顶部和底部，因此在我们使用键盘放大时仍然可见。如果您捏缩放，布局视窗可能不会完全可见。如果您从布局视窗的中间放大，内容将在四个方向上扩展。如果您有粘性页眉或页脚，它们将仍然粘贴到布局视窗的顶部或底部，但它们可能不会在设备屏幕的顶部和底部可见——也就是视觉视窗。视觉视窗是布局视窗中当前可见的部分。如果您向下滚动，您正在更改视觉视窗的内容并将布局视窗的底部调入视图，显示粘性页脚，然后它将保持粘贴在底部。

视觉视窗是屏幕的视觉部分，不包括屏幕键盘、捏缩放区域之外的区域或其他不随页面尺寸缩放的功能。视觉视窗与布局视窗大小相同或更小。

对于包含 iframe、对象或外部 SVG 的页面，包含页面和每个包含文件都有自己的唯一窗口对象。只有顶级窗口具有可能与布局视窗不同的视觉视窗。对于包含文档，视觉视窗和布局视窗是相同的。

CSS

上面描述的布局视窗和视觉视窗不是您遇到的唯一视窗。任何完全或部分显示在布局视窗内的子视窗都被视为视觉视窗。

我们通常认为宽度和高度媒体查询与浏览器窗口的宽度和高度相关。它们实际上是相对于视窗的，视窗是主文档中的窗口，但在嵌套的浏览上下文中（如对象、iframe 和 SVG）是元素父级的固有大小。在 CSS 中，我们还有基于视窗大小的长度单位。vh 单位是布局视窗高度的 1%。类似地，vw 单位是布局视窗宽度的 1%。

<iframe>

在 iframe 内部，视觉视窗是 iframe 内部宽度和高度的大小，而不是父文档。您可以在 iframe 上设置任何高度和宽度，但整个文档可能不可见。

如果您在 iframe 文档中的 CSS 中使用视窗长度单位，1vh 将是 iframe 高度的 1%，1vw 将是文档宽度的 1%。

css
iframe {
  width: 50vw;
}

如果 iframe 设置为 50vw，它将是我们上面示例中 1200px 父文档宽度的 50%，即 600px，其中 1vw 为 6px。放大后，iframe 缩小到 400px，1vw 变为 4px。

iframe 文档内的基于宽度的媒体查询相对于 iframe 的视窗。

css
@media screen and (min-width: 500px) {
  p {
    color: red;
  }
}

如果上面的 CSS 包含在 iframe 中，当用户放大时，段落将变为红色，但此样式在未放大状态下不适用。

SVG

在 SVG 文档中，视窗是 SVG 图像的可见区域。您可以在 SVG 上设置任何高度和宽度，但整个图像可能不可见。可见的区域称为视窗。视窗的大小可以使用 <svg> 元素的宽度和高度属性定义。

html
<svg height="300" width="400"></svg>

在此示例中，视窗的纵横比为 3:4，默认情况下为 400 x 300 个单位，其中一个单位通常为 CSS 像素。

SVG 还通过 viewBox 属性定义了一个内部坐标系，这与本视窗讨论无关。

如果您在 HTML 中包含 SVG 文件，SVG 的视窗是初始包含块，或 SVG 容器的宽度和高度。在 SVG 的 CSS 中使用 @media 查询是相对于该容器的，而不是浏览器。

css
@media screen and (min-width: 400px) and (max-width: 500px) {
  /* CSS goes here */
}

通常，当您编写上面的媒体查询时，如果视窗（通常是浏览器窗口）在 400px 到 500px（含）之间，则应用样式。SVG 中的宽度媒体查询基于包含 SVG 的元素——如果源是 SVG 文件，则为 <img>，如果 SVG 直接包含在 HTML 中，则为 SVG 本身，或者如果父元素有宽度分配并且——不是视窗的宽度。如果上面的媒体查询在我们的 SVG 文件中，则如果 SVG 容器在 400 到 500px 之间，则应用 CSS。

JavaScript

视觉视窗 API提供了一种查询和修改视觉视窗属性的机制。

移动视窗

移动设备的形状和尺寸各不相同，屏幕的设备像素比也不同。移动浏览器的视窗是窗口中可见网页内容的区域，该区域的大小不一定与渲染的页面相同。移动浏览器通常以 980px 的虚拟窗口或视窗渲染页面，这通常比屏幕更宽，然后缩小渲染结果以便可以一次看到所有内容。用户然后可以平移和缩放以查看页面的不同区域。例如，如果移动屏幕的宽度为 320px，网站可能会以 980px 的虚拟视窗渲染，然后缩小以适合 320px 的空间，这根据设计对于许多人（如果不是所有人）来说是难以辨认的。为了告诉移动浏览器使用视窗宽度而不是默认的 980px 作为屏幕的宽度，开发人员可以包含一个视窗元标记，如下所示

html
<meta name="viewport" content="width=device-width" />

width 属性控制视窗的大小。它最好设置为 device-width，它是在 100% 比例下屏幕以 CSS 像素为单位的宽度。还有其他属性，包括 maximum-scale、minimum-scale 和 user-scalable，它们控制用户是否可以放大或缩小页面，但默认值对于可访问性和用户体验来说是最好的，因此可以省略这些属性。

另请参阅