javascript - 移动设备上的视觉视口(viewport)与布局视口(viewport)

Question

我刚刚读了一篇 nice article on viewport这给我留下了几个关于移动设备上的视觉视口(viewport)与布局视口(viewport)的问题。

the width and the height of the layout viewport are equal to whatever can be shown on the screen in the maximally zoomed-out mode

我不太明白那是什么意思。当他们说“最大缩小模式”时，这是否意味着布局视口(viewport)对于不同的 HTML 是不同的(而不是特定于不同的设备，如 iPad、Xoom 等)？

其次，我创建了一个 demo page测量这两个视口(viewport)。 (请在 iPhone/iPad 上查看此内容以获得正确的值。)

我知道布局视口(viewport)可以通过设置元视口(viewport)标记来更改，但是也会更改视觉视口(viewport)——这是为什么呢？它说视觉视口(viewport)是当前显示在屏幕上的页面的一部分，所以我的理解是视觉视口(viewport)不应受到元视口(viewport)设置的影响。

Answer 1

布局视口(viewport)和视觉视口(viewport)均以 CSS 像素为单位进行测量。这是一个重要的区别。与设备上的物理像素相反，CSS 像素用于保持内容的尺寸相对恒定和受控，然后设备将 CSS 像素转换为设备像素。

了解 CSS 像素和设备像素之间的区别可能有助于理解和回答您的问题。

1. 布局视口(viewport)的尺寸实际上是内容的初始尺寸(以 CSS 像素为单位)。

   布局视口(viewport)用于最好地确定最初如何定位和呈现内容。它与设备的缩放级别无关。通过说“......在最大缩小模式下屏幕上可以显示的任何内容”，我认为他是在暗示布局视口(viewport)的尺寸是不变的；无论当前的视觉视口(viewport)如何，它的大小始终相同。

2. 视觉视口(viewport)就是页面的可视区域 -- 同样，以 CSS 像素为单位。如果你放大一个页面，你会增加 CSS 像素的大小，这自然会减少设备上可以容纳的 CSS 像素的数量。这就是为什么在缩放时视觉视口(viewport)的尺寸会缩小。

   视觉视口(viewport)不能大于页面上的内容。

   内容的尺寸主要由布局视口(viewport)决定。

   布局视口(viewport)的尺寸由元视口(viewport)规则设置。

   因此，视觉视口(viewport)的尺寸应该随着元视口(viewport)规则的变化而变化。

---

你已经问了(在评论中):

Why is it that when there's content that's explicitly wider than the layout viewport, the visual viewport is stretching to fit all of that in? Shouldn't there be a scrollbar?

不，因为您只是向浏览器指示布局视口(viewport)的初始尺寸应该是多少，而不是视觉视口(viewport)。

如果您不希望视觉视口(viewport)的尺寸在页面加载时调整为内容的全宽，请在元视口(viewport)声明中设置 initial-scale=1 属性。

---

在 Mozilla Dev Center 上有一篇关于视口(viewport)元标记的精彩阅读:https://developer.mozilla.org/en/mobile/viewport_meta_tag