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

Question

像iPhone/iPad这样的移动设备，可视化视口和布局视口之间有什么区别？

我已经经历了很多网上资源，但我对此尚不清楚。

Answer 1

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

布局视口可能比视觉视口宽得多，并且包含显示并且不出现在屏幕上的元素。

想象一下，布局视口是一个不会改变大小或形状的大图像。现在想象你有一个更小的框架，通过它你看大图像。小框架被不透明材料包围，遮挡了除大部分大图像以外的所有视图。您可以通过框架看到的大图像部分是可视视口。您可以在保持框架（缩小）的同时退出大图像以一次查看整个图像，或者可以靠近（放大）以仅查看一部分。您也可以更改框架的方向，但大图像（布局视口）的大小和形状不会更改。

对于这个问题的一个伟大的治疗，请参阅：http://www.quirksmode.org/mobile/viewports2.html

Answer 2

两个很好的解释中找到here。

总结：

视觉视

视觉视口的，因此目前在屏幕上显示的页面的一部分。用户可以滚动以更改他看到的页面部分，或者缩放以更改视觉视口的大小。

布局视

然而，CSS布局，特别是按百分比的宽度，是相对于布局视口，其比视觉视口要宽计算的。

因此，元素最初会占用布局视口的宽度，并且您的CSS会被解释为屏幕比手机屏幕宽得多。这可以确保您的网站布局的行为与在桌面浏览器上的布局相同。

布局视口有多宽？每个浏览器都不相同。 Safari iPhone使用980像素，Opera 850像素，Android WebKit 800像素和IE 974像素。

简而言之，布局视口一般是视口的宽度，当屏幕放大到最大时。