视觉视口和布局视口之间的区别？
iPhone/iPad 等移动设备的视觉视口和布局视口有什么区别？
网上查了很多资料，但还是不太明白。
What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iPad?
I have gone through a lot of online resources, but am still unclear about it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
视觉视口是当前在屏幕上显示的页面的一部分。
布局视口可以比视觉视口宽得多，并且包含出现和不出现在屏幕上的元素。
将布局视口想象为一个不会改变大小或形状的大图像。现在想象一下你有一个较小的框架，通过它可以看到大图像。小框架被不透明材料包围，这会遮挡您的视线，只看到大图像的一部分。您可以通过框架看到的大图像部分是视觉视口。您可以在按住框架的同时远离大图像（缩小）以立即查看整个图像，也可以靠近（放大）以仅查看一部分。您还可以更改框架的方向，但大图像（布局视口）的大小和形状永远不会改变。
有关该问题的最佳处理方法，请参阅：http://www.quirksmode.org/mobile/viewports2 .html
The visual viewport is the part of the page that’s currently shown on-screen.
The layout viewport can be considerably wider than the visual viewport, and contains elements that appear and do not appear on the screen.
Imagine the layout viewport as being a large image which does not change size or shape. Now imagine you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.
For a great treatment of the issue, see: http://www.quirksmode.org/mobile/viewports2.html
关于这两者的非常好的解释可以在此处找到。
总之：
视觉视口
布局视口
简而言之，布局视口一般是屏幕完全缩小时视口的宽度。
A very good explanation of the two is found here.
In summary:
Visual viewport
Layout viewport
In short, the layout viewport is generally the width of the viewport when the screen is zoomed all the way out.
布局视口
无论方向或缩放级别如何，其测量值始终相同，仅取决于设备/浏览器窗口。
视觉视口
它会变化（例如缩放时）。这是在任何给定点实际显示在屏幕上的页面部分。
两种布局的视频示例
布局视口：小地图中的绿色区域。
视觉视口：小地图中的红色框。
布局视口与视觉视口（视频）
在移动/平板电脑设备上
情况下情况可能会稍微复杂一些，因为为了提供“完整的网络”体验，许多移动设备返回假的更高的布局视口尺寸。
例如，经典 iPhone 默认报告的布局视口宽度为 980 像素。这意味着，如果您在 iPhone 上创建 320 像素的元素，它只会填充大约三分之一的屏幕空间。
但是，对于使用媒体查询针对窄屏幕进行优化的页面来说，这种机制不太好。
当我们创建响应式网站时，使用视口元标记非常有用，它可以让我们控制许多设备的缩放和布局视口（使用真实尺寸，而不是报告的假尺寸）。
视口元标记示例
没有视口元标记 使用视口元标记
Layout viewport
Its measurements are always the same regardless of orientation or zoom level, just depend on the device/browser window.
Visual viewport
It varies (when zoomed for example). This is the part of the page that’s actually shown on the screen at any given point.
Video example of both layouts
Layout viewport: The green area in the minimap.
Visual viewport: The red box in the minimap.
Layout viewport vs visual viewport (video)
On Mobile/Tablet devices
On mobile devices, things can be a little more complicated by default, because in order to allow a “full web” experience, many mobile devices return a fake higher layout viewport dimensions.
For example, the classic iPhone by default reports a layout viewport width of 980px. This means that if you create a 320px element on the iPhone, it will fill up only about a third of the screen real estate.
However, this mechanism is not so good for pages that are optimized for narrow screens using media queries.
When we are creating responsive websites is very useful to use the viewport meta tag, which lets us control the scaling and layout viewport of many devices (using the real dimensions, not the fake reported).
Examples of viewport meta tag
Without the viewport meta tag With the viewport meta tag