env(safe-area-inset-bottom) 在 css 中不起作用
fer*_*r0n 2 html css mobile-safari
我无法去env()上班。
* {
padding: 0;
margin: 0;
}
.testclass {
background-color: green;
padding-bottom: env(safe-area-inset-bottom);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="testclass">Hello there</div>
</body>
</html>它看起来是这样的：
添加填充可以按padding-bottom: 50px预期工作：
我在这里做错了什么？
编辑：我想通了大部分问题（参见答案），但将网站添加到主屏幕时仍然无法正常工作。也许这和Webpack有关。
事实证明：为了env(safe-area-inset-bottom)工作，使用“隐藏工具栏”选项隐藏底部栏是行不通的。相反，它必须通过滚动消失。
看来要使其工作，主体本身必须滚动（因此没有height: 100%或overflow: scroll在任何父项中）。
* {
padding: 0;
margin: 0;
}
.testclass {
margin-top: 100px;
background-color: green;
padding-bottom: env(safe-area-inset-bottom);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="testclass">Hello there</div>
</div>
<div style="height: 120vh"></div>
</body>
</html>