我希望将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。
@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上进行了详细讨论。