视觉视口和布局视口的区别? [英] Difference between visual viewport and layout viewport?

问题描述

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.

推荐答案

视觉视口是当前显示在屏幕上的页面部分.

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.

要详细了解该问题，请参阅:http://www.quirksmode.org/mobile/viewports2.html

For a great treatment of the issue, see: http://www.quirksmode.org/mobile/viewports2.html

这篇关于视觉视口和布局视口的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！