CSS安全区域属性在iPhone X上不起作用 [英] CSS safe area attributes doesn't work on iPhone X

问题描述

以我在iPhone X上运行Web应用程序为例，我尝试使用Webkit padding-top: constant(safe-area-inset-top);和padding-top: env(safe-area-inset-top);的安全区域css属性在顶部添加填充以将身体推到安全区域.但是，网络视图无法正确评估这些属性，因此始终设置为0. 我应该怎么做才能使其正常工作！ 代码:

In my case I'm running a web app on iPhone X, I'm trying to add a padding on top to push my body to the safe area using the safe area css attributes of Webkit padding-top: constant(safe-area-inset-top); and padding-top: env(safe-area-inset-top);. However the web view doesn't evaluate correctly these attributes and it's always set to 0. What should I dod to make it work ! code :

body {
padding-top: 44px;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

推荐答案

它需要

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

位于HTML开头的部分

in the head section of your HTML

这篇关于CSS安全区域属性在iPhone X上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！