移动设备上的视觉视口与布局视口答案

【问题标题】：Visual viewport vs Layout viewport on mobile devices移动设备上的视觉视口与布局视口
【发布时间】：2011-11-12 18:42:06
【问题描述】：

我刚刚阅读了nice article on viewport，它给我留下了几个关于移动设备上的视觉视口与布局视口的问题。

布局视口的宽度和高度等于任意值可以在最大缩小模式下显示在屏幕上

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

其次，我创建了一个demo page 来测量这两个视口。（请在 iPhone/iPad 上查看以获得正确的值。）

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

【问题讨论】：

【解决方案1】：

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

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

布局视口的尺寸实际上是内容的初始尺寸（以 CSS 像素为单位）。

布局视口用于最好地确定最初如何定位和呈现内容。它独立于设备的缩放级别。通过说“......在最大缩小模式下可以在屏幕上显示的任何内容”，我认为他是在暗示布局视口的尺寸是不变的；无论当前的视觉视口如何，它始终是相同的大小。
视觉视口只是页面的可视区域——同样，以 CSS 像素为单位。如果你放大一个页面，你会增加 CSS 像素的大小，这自然会减少设备上可以容纳的 CSS 像素的数量。这就是缩放时视觉视口尺寸缩小的原因。

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

内容的尺寸很大程度上取决于布局视口。

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

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

你已经问过（在 cmets 中）：

为什么当内容明显比布局视口宽时，视觉视口会拉伸以适应所有内容？不应该有滚动条吗？

不，因为您只是向浏览器指示布局视口的初始尺寸应该是什么，而不是视觉视口。

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

在 Mozilla 开发中心有一篇关于视口元标记的精彩文章：https://developer.mozilla.org/en/mobile/viewport_meta_tag

【讨论】：

我刚读了你的答案，仍然很难理解你想说什么......也许我需要再读几遍才能变得更清楚......无论如何，会你可以用更简单的术语来解释，或者根据我发布的例子来解释..
我已经重新组织并清理了我的解释。我还没有引用你的例子，但如果现在更清楚了，请告诉我。
嘿 Chris..thx 更新您的答案..现在好多了，虽然我有一些后续问题..我了解 CSS 和设备像素之间的差异..我的问题是 1. 你说布局视口总是代表内容的全宽和全高，所以当我们设置元视口标签时，是控制布局视口还是还是由内容的宽/高决定。这是否还取决于内容或设置视口宽度的最大输出是多少？ 2.您说视觉视口的尺寸与内容的尺寸相关联。我没听懂……我的意思是不应该一直修复吗？
让我们continue this discussion in chat
@testndtv - 如果您有更多问题，请将它们作为新问题发布。 Stack Overflow 不是论坛，也不处理线程。