视觉视口和布局视口的区别

视觉视口和布局视口的区别

January 2, 2020
Web, 前端
★ 在 GitHub 赞我

视觉视口

视觉视口是指当前在屏幕上显示的页面的部分。用户可以通过滚动来改变他所看到的页面部分,或者缩放来改变可视视口的大小。


布局视口

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

因此,元素最初采取的是布局视口的宽度,而你的CSS被解释为屏幕明显比手机屏幕宽得多。这样可以确保你的网站的布局在桌面浏览器上的表现与桌面浏览器一样。

布局视口有多宽?这因浏览器的不同而不同。Safari iPhone 使用 980px,Opera 850px,Android WebKit 800px,IE 974px。


简而言之,布局视口一般是指屏幕全部放大后的视口宽度。

来源: Ref