【发布时间】：2011-09-14 02:30:36
【问题描述】：
对于 iPhone/iPad 等移动设备，视觉视口和布局视口有什么区别？
网上找了很多资源，还是不太清楚。
【问题讨论】：
标签： html css ipad mobile-website viewport
【发布时间】：2011-09-14 02:30:36
【问题描述】：
视觉视口是当前在屏幕上显示的页面部分。
布局视口可以比视觉视口宽得多，并且包含在屏幕上出现和不出现的元素。
将布局视口想象成一个不会改变大小或形状的大图像。现在假设您有一个较小的框架，您可以通过它查看大图像。小框架被不透明的材料包围，除了大图像的一部分外，您无法看到所有内容。您可以通过框架看到的大图像部分是视觉视口。您可以在握住相框的同时远离大图像（缩小）以一次查看整个图像，或者您可以靠近（放大）以仅查看一部分。您也可以更改框架的方向，但大图像（布局视口）的大小和形状永远不会改变。
有关此问题的详细处理方法，请参阅：http://www.quirksmode.org/mobile/viewports2.html
【讨论】：
-
非常感谢......我已经浏览了你提供的链接，毫无疑问，它是一个非常好的参考......但是，我不太明白他们说“......浏览器选择了布局视口的尺寸，使其在完全缩小模式下完全覆盖屏幕（因此等于视觉视口）......”。 AND "... 布局视口宽度始终相同。如果您旋转手机，视觉视口会发生变化，但浏览器会通过稍微放大以适应新的方向，使布局视口再次与视觉视口一样宽.
-
将布局视口想象成一个不改变大小或形状的大图像。现在图像您有一个较小的框架，您可以通过它查看大图像。小框架被不透明的材料包围，除了大图像的一部分外，您无法看到所有内容。您可以通过框架看到的大图像部分是视觉视口。您可以在握住相框的同时远离大图像（缩小）以一次查看整个图像，或者您可以靠近（放大）以仅查看一部分。 （续）
-
（续）您还可以更改框架的方向，但大图像（布局视口）的大小和形状永远不会改变。
-
Superb..cool explnation..一个问题...这个视口只有在万一的情况下才重要。 % 宽度..我的意思是，如果在我的页面上，我给出 1000 像素的绝对宽度，视口可以以某种方式覆盖它吗？
-
根据 Quirksmode 文章：“...CSS 布局，尤其是百分比宽度，是相对于布局视口计算的。”此外，当用户完全缩小时，布局视口等于屏幕的大小。因此，宽度不会被覆盖，但用户可能需要缩小非常非常远才能在视觉视口中一次看到整个 1000px 宽度。
找到了对这两者的一个很好的解释here。
总结：
视觉视口
视觉视口是当前在屏幕上显示的页面部分。用户可以滚动来改变他看到的页面部分，或者缩放来改变可视视口的大小。
布局视口
但是，CSS 布局，尤其是百分比宽度，是相对于布局视口计算的，它比视觉视口宽得多。
因此，元素最初采用布局视口的宽度，并且您的 CSS 被解释为屏幕明显比手机屏幕宽。这可确保您网站的布局与在桌面浏览器上一样。
布局视口有多宽？这因浏览器而异。 Safari iPhone 使用 980px、Opera 850px、Android WebKit 800px 和 IE 974px。
简而言之，布局视口一般是屏幕一直放大时的视口宽度。
【讨论】：
布局视口
无论方向或缩放级别如何，其测量值始终相同，仅取决于设备/浏览器窗口。
视觉视口
它会有所不同（例如缩放时）。这是在任何给定点实际显示在屏幕上的页面部分。
两种布局的视频示例
布局视口：小地图中的绿色区域。
视觉视口：小地图中的红色框。
Layout viewport vs visual viewport (video)
在移动/平板设备上
在移动设备上，默认情况下事情可能会稍微复杂一些，因为为了提供“完整的网络”体验，许多移动设备会返回虚假的更高布局视口尺寸。
例如，默认情况下经典 iPhone 报告的 布局视口 宽度为 980 像素。这意味着，如果您在 iPhone 上创建一个 320 像素的元素，它只会填满大约三分之一的屏幕空间。
但是，这种机制对于使用媒体查询针对窄屏幕进行优化的页面来说并不是那么好。
当我们创建响应式网站时，使用视口元标记非常有用，它可以让我们控制许多设备的缩放和布局视口（使用真实尺寸，而不是虚假报告）。
<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />
视口元标记示例
提示：如果您使用手机或平板电脑浏览此页面，您可以 点击下面的两个链接查看区别。
【讨论】：