我刚刚阅读了一篇nice article on viewport，其中有一些关于移动设备上的视频视口与布局视口的问题。
布局视口的宽度和高度等于任何值 可以在最大缩小模式下在屏幕上显示
我不太明白这意味着什么。当他们说“最大缩小模式”时，这是否意味着布局视口对于不同的HTML是不同的（而不是特定于iPad，Xoom等不同的设备）？
其次，我创建了一个demo page来测量这两个视口。 （请在iPhone / iPad上查看以获得正确的值。）
我了解可以通过设置元视口标记来更改布局视口，但也会更改视觉视口 - 为什么会这样？它表示视觉视口是当前在屏幕上显示的页面的一部分，因此我的理解是视觉视口不应受元视口设置的影响。
答案 0 :(得分：17)
布局视口和可视视口都以CSS像素为单位进行测量。这是一个重要的区别。与设备上的物理像素相反，CSS像素用于保持内容的尺寸相对恒定和受控，然后设备将CSS像素转换为设备像素。
了解CSS像素和设备像素之间的差异可能有助于理解和回答您的问题。
布局视口的尺寸实际上是内容的初始尺寸（以CSS像素为单位）。
布局视口用于最佳地确定如何最初定位和呈现内容。它与设备的缩放级别无关。通过说“......在最大缩小模式下可以在屏幕上显示的内容”，我认为他暗示布局视口的尺寸是不变的;无论当前的视觉视口如何，它都将始终具有相同的大小。
视觉视口只是页面的可视区域 - 再次以CSS像素显示。如果放大页面，则会增加CSS像素的大小，这自然会减少可以放在设备上的CSS像素数。这就是缩放时视觉视口的尺寸缩小的原因。
视觉视口不能大于页面上的内容。
内容的尺寸主要由布局视口决定。
布局视口的尺寸由元视口规则设置。
因此，视觉视口的尺寸应该随着元视口规则的变化而变化。
您已经问过（在评论中）：
为什么当内容明显比布局视口宽时，视觉视口会伸展以适应所有这些内容？不应该有滚动条吗？
不，因为您只是向浏览器指示布局视口的初始尺寸应该是什么，而不是视觉视口。
如果您希望视觉视口的尺寸不会调整到页面加载时内容的整个宽度，请在元视口声明中设置initial-scale=1属性。
关于视口元标记的Mozilla开发中心有一个很棒的读物：https://developer.mozilla.org/en/mobile/viewport_meta_tag