这篇翻译不完整。请帮忙从英语翻译这篇文章

这篇文章阐述了视口(viewport)的概念,对 visual viewport 和 布局视口(layout viewport) 进行区分,并让你了解 viewport 的意义是什么,以及它对 CSS, SVG 和移动设备方面的影响。

什么是 viewport ?

视口(viewport)代表当前可见的计算机图形区域。在 Web 浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。

文档,比如这篇文章,可能会非常长。你的 viewport 就是你现在所能见到的所有事物。值得注意的是“什么是视口区域”这个问题,页面中的一些导航菜单也包括在其中。Viewport 的大小取决于屏幕的大小,无论浏览器是否处于全屏模式,是否被用户缩放了。Viewport 外的区域,比如这个文档的 See Also 部分,可能需要滚动到其所在的区域才会出现在屏幕上。

  • 在尺寸较大的设备中,在这些设备上,应用显示区域不一定是全屏的,viewport 是浏览器窗口的大小。
  • 在大多数移动设备中,浏览器是全屏的,viewport 是整个屏幕的大小。
  • 在全屏模式下,viewport 是设备屏幕的范围,窗口是浏览器窗口,浏览器窗口大小小于或等于视口的大小,并且文档是这个网站,文档的大小可比 viewport 长或宽。

概括地说,viewport 基本上是当前文档的可见部分。

Viewport 大小是可变的

Viewport 的宽度并不总是窗口的宽度。如果你测试 Chrome 或 Firefox 浏览器中 window 和 document 的宽度和高度,你会得到如下值:

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

下面是一些帮助你查询查询 viewport 大小和其它类似的长度属性的 DOM 属性:

  • 文档的 Element.clientWidth 是指一个文档使用 CSS pixels 单位表示的内部宽度, 包括其 padding (不包括 borders, margins 或垂直滚动条,如果有的话). 这就是 viewport 的宽度
  • Window.innerWidth 是用 CSS pixels 单位表示的浏览器窗口 viewport 宽度,包括垂直滚动条,如果渲染了的话。
  • Window.outerWidth 是指包括了浏览器外边框的窗口宽度。

在实测中,innerWidthouterWidth 是相同的,但是 outerHeightinnerHeight 高100px。这是因为 outerHeight 的测量包括浏览器框架在内,包括了地址栏和书签栏总共 100px 的高度,而浏览器没有左右边框。

innerHeightinnerWidth 所组成的区域通常被认为是布局视口(layout viewport) 。浏览器的框架不被认为是 viewport 的一部分.

当缩放时, Firefox 和 Chrome 对 innerWidthclientWidth 给出了新的 CSS 像素大小。浏览器对 outerWidthouterHeight 的返回值有差异。Firefox 返回了缩放后的 CSS 像素值,Chrome 返回了默认的像素值:

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

原始的 viewport 大小是 1200 * 800 像素。缩放后变成了 800 * 533。这是 layout viewport。该网页有固定的头部和尾部,带有下列样式,它们将会固定在相对 layout viewport 的顶部和底部。

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

缩放后,我们得到了 800 * 533 的测量值。头部和尾部仍然固定在窗口的顶部和底部。但是当使用触屏双指缩放或者当动态键盘在手机上弹出的时候呢?

Web 浏览器包含两个 viewport,布局视口(layout viewport)视觉视口(visual viewport)。visual viewport 指当前浏览器中可见的部分,并且可以变化。当使用触屏双指缩放,当动态键盘在手机上弹出的时候,或者之前隐藏的地址栏变得可见的时候,visual viewport 缩小了,但是 layout viewport 却保持不变。

我们上面说到的固定的头部和尾部,固定在 layout viewport 的底部和顶部,所以当 visual viewport 缩小的时候,保留在视觉中。当你缩放页面时,布局视口可能不能被全部看到。如果你放大布局视口的中间部分,内容讲在四个方向上扩展。如果你有一个固定的头部和底部,它们依然固定在布局视口的顶部和底部,因此它们可能会在设备屏幕的底部和顶部不可见-视觉视口。视觉视口是布局视口当前的可见部分如果你向下滚动,视觉视口的内容就会改变,并布局视口的底部就会滚动到可视区域。

T视觉视口是屏幕的可视部分,不包括屏幕键盘,缩放外的区域。视觉视口比布局视口相同或者更小

对于一个包含框架,objects或外部svg的页面,两者都有它们自己的window对象,只有最外层的window的视觉视口不同于布局视口。对于包含的文档,视觉视口与布局视口是相同的。

CSS

 

在上面描述的布局视口(layout viewport)和视觉视口(visual viewport)不是您将遇到的唯一视口。 在布局视口中完全或部分显示的任何子视口都被视为可视视口。

我们通常认为宽度和高度的媒体查询是相对于浏览器窗口的宽度和高度而言的。 它们实际上是相对于视口的,即主文档(document)中的窗口(window对象),但它也是嵌套浏览上下文(如对象,iframe和SVG)中元素父级的本身的大小。 在CSS中,我们也有基于视口大小的长度单位。 1vh单位是1%布局视口的高度,vw单位与此类似。

<iframe>

Inside an iframe, the visual viewport is the size of the inner width and height of the iframe, rather than the parent document. You can set any height and width on an iframe, but the whole document may not be visible.

If you use viewport length units in your CSS within the iframe document, 1vh will be 1% of the height of the iframe, and 1vw will be 1% of the width of the document.

iframe {
    width: 50vw;
}

If the iframe is set to 50vw, it will be 50% of the width of the 1200px parent document in our example above, or 600px, with 1vw being 6px. When zoomed in, the iframe shrinks to 400px and 1vw becomes 4px.

A width-based media query within the iframe document is relative to the iframe's viewport.

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

If the above CSS is included in the iframe, the paragraphs will become red when the user has zoomed in, but this style does not apply in the non-zoomed-in state.

SVG

In an SVG document, the viewport is the visible area of the SVG image. You can set any height and width on an SVG, but the whole image might not be visible. The area that is visible is called the viewport. The size of the viewport can be definited using the width and height attributes of the <svg> element.

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

In this examples, the viewport has an aspect ratio of 3::4, and is, but default, 400  by 300 units, with a unit generally being a CSS pixel.

SVG also has an internal coordinate system defined via the viewbox attribute, which is not related to this viewport discussion.

If you include an SVG file in your HTML, the viewport of the SVG is the initial containing block, or the width and height of the SVG container. Using the @media query in your SVG's CSS is relative to that container, not the browser.

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

Generally, when you write the above media query, the styles are applied if the viewport, generally the browser window is between 400px and 500px, inclusive. The width media query in the SVG is based on the element in which the SVG is contained — the <img> if the source is an SVG file, the SVG itself if the SVG is included directly into the HTML, or the parent if the parent element has a width assigned and  — not the viewport’s width. With the above media query being in our SVG file, the CSS is applied if the SVG container is between 400 and 500px.

JavaScript

The Visual Viewport API provides a mechanism for querying and modifying the properties of the visual viewport.

移动设备的视口

各种不同形状,不同设备像素比的手机。移动设备浏览器的视口是窗口中显示网页信息的区域,不一定与渲染页面大小相同 Mobile browsers render pages in a virtual window or viewport, generally at 960px, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 320px, a website might be rendered with a virtual viewport of 960px, and then it will be shrunk down to fit into the 320px space, which, depending on the design, is illegible for many if not everyone. To tell a mobile browser to use the viewport width instead of the default 960px as the width of the screen, developers can include a viewport meta tag, like the following:

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

The width property controls the size of the viewport. It should preferably be set to device-width, which is the width of the screen in CSS pixels at a scale of 100%. There are other properties, including maximum-scale, minimum-scale, and user-scalable, which control whether users can zoom the page in or out, but the default values are the best for accessibility and user experience, so these can be omitted.

See Also

文档标签和贡献者

此页面的贡献者: Hew007, mdnwebdocs-bot, delbertbeta, kioyang
最后编辑者: Hew007,