这篇翻译不完整。请帮忙从英语翻译这篇文章

草案
本页尚未完工.

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

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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
viewport-fit descriptor
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

另请参见

文档标签和贡献者

此页面的贡献者: PYGC, gzbitzxx, zhangchen, codeXtt
最后编辑者: PYGC,