viewport-fit

草案
本页尚未完工.

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

viewport-fit CSS @viewport  descriptor 是为了控制文档是如何填充满屏幕的。

语法

/* 关键值*/
viewport-fit: auto;
viewport-fit: contain;
viewport-fit: cover;

属性值

auto
此值不影响初始布局视图端口,并且整个web页面都是可查看的。
contain
视图端口按比例缩放,以适合显示内嵌的最大矩形。
cover
视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量,以确保重要内容不会出现在显示之外。

形式语法

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

注意

在使用 viewport-fit 描述符时,必须记住并不是所有的设备显示都是矩形的,因此应该使用safe area inset 变量

规范

Specification Status Comment
CSS Round Display Level 1
"viewport-fit" descriptor
Working Draft Initial definition.

另请参见