我刚刚读了一篇关于视口的好文章 http://www.quirksmode.org/mobile/viewports2.html这给我留下了一些关于移动设备上的视觉视口与布局视口的问题。
布局视口的宽度和高度等于任何值
可以以最大缩小模式显示在屏幕上
我不太明白这意味着什么。当他们说“最大缩小模式”时，这是否意味着布局视口对于不同的 HTML 是不同的（而不是特定于不同的设备，如 iPad、Xoom 等）？
其次，我创建了一个演示页面 http://ipad.atwebpages.com/viewport.html测量这两个视口。 （请在 iPhone/iPad 上查看此内容以获得正确的值。）
我知道布局视口可以通过设置元视口标签来更改，但是also改变视觉视口——为什么呢？它说视觉视口是当前在屏幕上显示的页面的一部分，所以我的理解是视觉视口不应受到元视口设置的影响。
布局视口和视觉视口均以 CSS 像素为单位进行测量。这是一个重要的区别。与设备上的物理像素相反，CSS 像素用于保持内容尺寸相对恒定和受控，然后设备将 CSS 像素转换为设备像素。
了解 CSS 像素和设备像素之间的差异可能有助于理解和回答您的问题。
-
布局视口的尺寸实际上是内容的初始尺寸（以 CSS 像素为单位）。
布局视口用于最好地确定最初如何定位和渲染内容。它与设备的缩放级别无关。通过说“......在最大缩小模式下可以在屏幕上显示的任何内容”，我认为他暗指布局视口的尺寸不变；无论当前的视觉视口如何，它始终具有相同的大小。
-
视觉视口只是页面的可视区域——同样以 CSS 像素为单位。如果放大页面，则会增加 CSS 像素的大小，这自然会减少设备上可容纳的 CSS 像素数量。这就是为什么缩放时视觉视口的尺寸会缩小的原因。
视觉视口不能大于页面上的内容。
内容的尺寸很大程度上由布局视口决定。
布局视口的尺寸由元视口规则设置。
因此，视觉视口的尺寸应该根据元视口规则的变化而变化。
您后来问（在评论中）：
为什么当内容明显比布局视口宽时，视觉视口会拉伸以适应所有内容？不是应该有滚动条吗？
不，因为您只是向浏览器指示布局视口的初始尺寸应该是多少，而不是视觉视口。
如果您希望视觉视口的尺寸不调整为页面加载时内容的完整宽度，请设置initial-scale=1元视口声明中的属性。
Mozilla 开发中心上有一篇关于视口元标记的精彩读物：https://developer.mozilla.org/en/mobile/viewport_meta_tag https://developer.mozilla.org/en/mobile/viewport_meta_tag
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
