viewport-fit = cover不再可在iOS Safari上使用吗?

问题描述 投票:0回答:1

我希望将iOS Safari的100%屏幕宽度用于notched iOS/Android device上我网站的标题,并实现在页面<head></head>上添加以下视口meta_tag:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

然后在我页面的<header>元素上,我将CSS宽度指定为100%(或100vmin)。我不需要在任何网页上使用env(safe-area-insets)填充,因为它们以特定方式设置样式。

这几乎是苹果公司在official documentation上为缺口iPhone描述了iOS Safari网络api的方式,但似乎不起作用!

我想念什么吗?

编辑:我在iPhone 11 Pro Max上的iOS Safari 13.3.1。

css ios mobile-safari
1个回答
0
投票
[从2019年末开始,Apple现在建议使用@supports(padding:max(0px)) { env() }查询来检测并修复网站的缺口环境,例如:

@supports(padding:max(0px)) { body, header, footer { padding-left: min(0vmin, env(safe-area-inset-left)); padding-right: min(0vmin, env(safe-area-inset-right)); } }

以上查询和css在here上进行了详细讨论。 
© www.soinside.com 2019 - 2024. All rights reserved.