CSS 安全区域属性在 iPhone X 上不起作用

Ous*_*ray 5 html css iphone ios iphone-x

就我而言,我在 iPhone X 上运行一个网络应用程序,我试图在顶部添加一个填充,以使用 Webkitpadding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);. 但是,Web 视图无法正确评估这些属性,并且它始终设置为 0。我应该怎么做才能使其正常工作!代码 :

body {
padding-top: 44px;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

在此处输入图片说明

Alb*_*ozi 11

它需要

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 
Run Code Online (Sandbox Code Playgroud)

在 HTML 的 head 部分

  • 就我而言,我从developer.mozilla(谷歌上的热门)获取的元标记缺少 viewport-fit=cover ,这似乎是重要的一点。 (2认同)

Sab*_*ine 0

没有行 padding-top: env(safe-area-inset-top); 它应该有效