Html 视觉视口和布局视口的区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6333927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between visual viewport and layout viewport?
提问by testndtv
What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iPad?
iPhone/iPad 等移动设备的视觉视口和布局视口有什么区别？
I have gone through a lot of online resources, but am still unclear about it.
我浏览了很多在线资源，但仍然不清楚。
回答by George Cummins
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
要对该问题进行很好的处理，请参阅：http: //www.quirksmode.org/mobile/viewports2.html
回答by simshaun
A very good explanation of the two is found here.
对两者的很好解释可以在这里找到。
In summary:
总之：
Visual viewport
视觉视口
The visual viewport is the part of the page that's currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.
视觉视口是当前显示在屏幕上的页面部分。用户可以滚动以更改他看到的页面部分，或缩放以更改视觉视口的大小。
Layout viewport
布局视口
However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.
Thus the element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site's layout behaves as it does on a desktop browser.
How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
然而，CSS 布局，尤其是百分比宽度，是相对于布局视口计算的，布局视口比视觉视口宽得多。
因此，该元素最初采用布局视口的宽度，并且您的 CSS 被解释为好像屏幕明显比手机屏幕宽。这可确保您网站的布局与桌面浏览器上的布局一样。
布局视口有多宽？这因浏览器而异。Safari iPhone 使用 980px、Opera 850px、Android WebKit 800px 和 IE 974px。
In short, the layout viewport is generally the width of the viewport when the screen is zoomed all the way out.
简而言之，布局视口一般就是屏幕完全放大时视口的宽度。
回答by Juanma Menendez
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 viewportdimensions.
在移动设备上，默认情况下事情可能会稍微复杂一些，因为为了允许“完整的网络”体验，许多移动设备返回虚假的更高布局视口尺寸。
For example, the classic iPhone by default reports a layout viewportwidth 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.
例如，经典 iPhone 默认报告布局视口宽度为 980 像素。这意味着如果你在 iPhone 上创建一个 320px 的元素，它只会填满大约三分之一的屏幕空间。
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).
当我们创建响应式网站时，使用视口元标记非常有用，它可以让我们控制许多设备的缩放和布局视口（使用真实尺寸，而不是虚假报告）。
<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />
Examples of viewport meta tag
视口元标记示例
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
提示：如果您使用手机或平板电脑浏览此页面，您可以点击以下两个链接查看不同之处。
