在移动设备（如iPhone / iPad）中，视觉视口和布局视口有什么区别？
我查阅了很多在线资源，但仍不清楚它们之间的区别。
我查阅了很多在线资源，但仍不清楚它们之间的区别。
3个回答
49
可见视口是当前屏幕上显示的页面部分。
布局视口可以比可见视口宽得多，并包含在屏幕上出现和不出现的元素。
想象一下布局视口就像一张不改变大小或形状的大图像。现在想象你有一个较小的框架，通过它你可以看到这张大图片。小框架被不透明的材料包围，遮挡了除了大图片的一部分以外的所有内容。你能够透过这个框架看到的大图片的那一部分就是可见视口。你可以后退离开这张大图片（缩小），从而一次性地查看整张图片，或者你可以靠近（放大）只看到部分。你还可以改变框架的方向，但是大图片（布局视口）的大小和形状永远不会改变。
要深入了解此问题，请参见：http://www.quirksmode.org/mobile/viewports2.html
- George Cummins
8
非常感谢。我已经看了你给的链接，毫无疑问，这是一个非常好的参考资料。但是，我没有完全理解他们说的部分：“......浏览器选择其布局视口的尺寸，以便在完全缩小模式下完全覆盖屏幕（因此等于视觉视口）....”。还有，“......布局视口宽度始终相同。如果您旋转手机，视觉视口会发生变化，但浏览器通过略微缩放来适应新方向，使布局视口再次与视觉视口一样宽。” - copenndthagen
22将布局视口想象成一张大小和形状都不会改变的大图片。现在，想象你有一个小框架，通过它你可以看到这张大图片。小框架被不透明材料包围，挡住了你看到大图片除一部分以外的内容。你能够透过小框架看到的那部分大图片就是视觉视口。当你持着框架向后移（缩小）时，能够一次性地看到整张大图片，而当你向前移动（放大）时，只能看到其中的一部分。（续） - George Cummins
3您可以改变框架的方向，但大图像（布局视口）的大小和形状永远不会改变。 - George Cummins
1根据Quirksmode文章的说法：“...CSS布局，特别是百分比宽度，是相对于布局视口计算的。”此外，布局视口等于用户将缩放全部缩小时屏幕的大小。因此，宽度不会被覆盖，但用户可能需要非常非常远地缩小才能在视觉视口中一次性看到整个1000px宽度。 - George Cummins
根据这篇文章，布局视口对于特定设备始终保持不变。它不会在页面之间发生改变。 - George Cummins
显示剩余3条评论
13
这里可以找到一个非常好的关于这两个概念的解释 here.
简而言之：
可视窗口
可视窗口是当前显示在屏幕上的页面部分。用户可以滚动以更改所看到的页面部分，或者缩放以更改可视窗口的大小。
布局窗口
然而，CSS 布局，特别是百分比宽度，是相对于布局视口计算的，而布局视口要比可视窗口宽得多。
因此，
<body>元素最初采用布局视口的宽度，你的 CSS 的解析结果就好像屏幕比手机屏幕宽得多一样。这样确保了您的网站布局与在桌面浏览器上的表现相同。布局视口的宽度是多少？这取决于不同的浏览器。Safari iPhone 使用 980px，Opera 850px，Android WebKit 800px 和 IE 974px。
简而言之，在屏幕缩至最小时，布局视口通常是视口的宽度。
- simshaun
4
布局视口
其大小始终相同，不受设备/浏览器窗口的方向或缩放级别影响，只取决于设备/浏览器窗口大小。
可视视口
它会因为缩放等变得不同。这是页面在任何给定点上实际显示在屏幕上的部分。
两种布局视口的视频示例
布局视口：迷你地图中的绿色区域。
可视视口：迷你地图中的红色框。
关于移动/平板设备
在移动设备上，默认情况下可能会更加复杂，因为为了实现“完整的网络”体验，许多移动设备返回虚假的更高布局视口尺寸。
例如，经典的 iPhone 默认报告布局视口宽度为 980 像素。这意味着如果您在 iPhone 上创建一个 320 像素的元素，它只会占据屏幕空间的大约三分之一。
然而，对于使用媒体查询优化为狭窄屏幕的页面，这种机制并不太好。
在创建响应式网站时，非常有用的是使用视口 meta 标签，它让我们控制许多设备的缩放和布局视口（使用真实尺寸，而不是虚假报告的尺寸）。
<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />
viewport meta标签的示例
提示：如果您正在使用手机或平板电脑浏览此页面，可以单击下面的两个链接以查看差异。
- Juanma Menendez
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接