可视视口和布局视口之间的区别？

Question

iPhone / iPad等移动设备的可视视口和布局视口之间的区别是什么？

我已经浏览了很多在线资源，但我仍然不清楚它。

Answer 1

可视视口是当前在屏幕上显示的页面的一部分。

布局视口可以比视觉视口宽得多，并且包含显示但不会出现在屏幕上的元素。

想象一下，布局视口是一个不会改变大小或形状的大图像。现在假设你有一个较小的框架，你可以通过它看到大图像。小框架被不透明材料包围，这些材料遮挡了除大部分图像之外的所有部分的视图。您可以通过框架看到的大图像部分是可视视口。您可以在保持框架的同时远离大图像（缩小）以一次查看整个图像，或者您可以靠近（放大）以仅查看一部分。您也可以更改框架的方向，但大图像（布局视口）的大小和形状永远不会改变。

要妥善处理此问题，请参阅：http://www.quirksmode.org/mobile/viewports2.html

Answer 2

对这两者的一个非常好的解释是 here 。

总结：

视觉观看

  

可视视口是当前在屏幕上显示的页面的一部分。用户可以滚动以更改他看到的页面部分，或者缩放以更改可视视口的大小。

布局视口

  

但是，CSS布局（尤其是百分比宽度）是相对于布局视口计算的，布局视口比视觉视口宽得多。

     

因此，元素最初采用布局视口的宽度，并且您的CSS被解释为屏幕明显比手机屏幕宽。这可以确保您网站的布局与桌面浏览器上的布局相同。

     

布局视口有多宽？这与浏览器不同。 Safari iPhone使用980px，Opera 850px，Android WebKit 800px和IE 974px。

简而言之，布局视口通常是屏幕完全缩放时视口的宽度。

Answer 3

布局视口

无论方向或缩放级别如何，其测量值始终相同，仅取决于设备/浏览器窗口。

视觉视口

它有所不同（例如，放大时）。这是页面上实际显示在任意位置的页面的一部分。

两种布局的视频示例

布局视口：小地图中的绿色区域。
视觉视口：迷你地图中的红色框。

Layout viewport vs visual viewport (video)

在移动/平板电脑设备上

在移动设备上，默认情况下会稍微复杂一些，因为为了提供“完整的网络”体验，许多移动设备会返回假的更高的 layout视口尺寸。

例如，默认情况下，经典iPhone报告的布局视口宽度为980px。这意味着，如果您在iPhone上创建一个320px的元素，它将仅占屏幕空间的三分之一。

但是，对于使用媒体查询针对窄屏进行了优化的页面而言，这种机制并不是很好。

当我们创建响应式网站时，使用viewport meta标签非常有用，它使我们能够控制许多设备的缩放和布局视口（使用实际尺寸，而不是虚假的报道）。

<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />

视口元标记示例

  

提示：如果您使用手机或平板电脑浏览此页面，则可以   点击下面的两个链接以查看区别。

Without the viewport meta tag With the viewport meta tag