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

Question

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

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

Answer 1

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

布局视口可以比视觉视口宽得多,并且包含显示在屏幕上但不显示的元素.

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

有关该问题的最佳处理,请参阅:http://www.quirksmode.org/mobile/viewports2.html

Answer 2

两个很好的解释中找到这里.

综上所述:

视觉视口

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

布局视口

但是,CSS布局(尤其是百分比宽度)是相对于布局视口计算的,布局视口比视觉视口宽得多.

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

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

简而言之,布局视口通常是屏幕一直缩放时视口的宽度.