什么是虚拟视口?

Matt Gaunt

Chrome M40 中,视口发生了细微变化,但应该会给用户带来很大的不同。

最初,由于缺少视口元标记,导致网页以大约 980px 的屏幕空间显示,并以此尺寸呈现。借助视口元标记,开发者可以定义宽度(最常见的是“设备宽度”),用于将屏幕尺寸设置为设备的尺寸。您可以详细了解“网站开发基础”

Rick Byers 描述虚拟视口是这样的:虚拟视口的思路是将“视口”的概念分成两个:“布局视口”(附加了固定位置的项目)和“视觉视口”(用户实际看到的内容)。

超级简单的示例

网站 videojs.com 就是一个很好的例子,因为它的应用栏固定在顶部,并且应用栏的左右两侧都有链接。

下图显示了您在放大某个网站并尝试左右平移时会看到的内容。

排名靠前的设备是 Chrome M39(没有虚拟视口),而底部三个设备来自具有虚拟视口的 Chrome M40。

像素化渲染。
像素化渲染。

在 Chrome M39 中,您会在放大后看到应用栏,但向右滚动会无法查看应用栏右侧的链接,您只会看到徽标。

将其与 Chrome M40(具有“虚拟视口”)进行比较,您会发现,“可视视口”会滚动“布局视口”内的所有内容,让您可以查看右侧的链接。

Internet Explorer 已具有此行为,而这些更改使我们与其紧密相关。

html

在 M39 中,唯一面向开发者的主要变化就是,您可以在 html 元素上应用 overflow: hidden,使网页仍会滚动;在 M40 中,此功能已不再受支持,网页根本不会滚动。

更可靠的信息

你想了解更多吗?

然后,您可以查看下面的幻灯片。