如何去除 iPhone X 和更新型号手机壳中的填充物？答案

【问题标题】：How to remove padding in the case with iPhone X and newer models?如何去除 iPhone X 和更新型号手机壳中的填充物？
【发布时间】：2021-08-27 19:10:42
【问题描述】：

有没有人知道：在 iPhone X 和其他 iPhone 机型的情况下，如何去除显示屏左右两侧的填充？

  body { -webkit-text-size-adjust: none; }
    *{ margin : 0; padding : 0;box-sizing: border-box; }
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)       env(safe-area-inset-bottom) env(safe-area-inset-left);

<!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
   <body style="background-color: black">
</body>
</html>

【问题讨论】：

标签： css iphone padding

【解决方案1】：

您必须使用适当的env(safe-area-inset-*) 值调整所有四个padding 参数：

    body { -webkit-text-size-adjust: none; }
    *{ margin : 0; padding : 0;box-sizing: border-box; }
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

<!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
   <body style="background-color: black">
</body>
</html>

【讨论】：

感谢您的关注。我使用了您的代码，但字段并没有消失。
我无法在我的物理 iPhone X 设备上使用this Repl.it 重现您描述的行为。我鼓励您使用实际设备而不是模拟器/模拟器进行测试，因为它可能无法正确呈现像这样的边缘情况。
是的，我使用了两个模拟器：一个在 Chrome 浏览器中，一个在 BrowserStack Live 等公共模拟器中，但它们返回的结果不同，而且手头没有 iPhone 可以检查。
在这种情况下，我会非常警惕模拟器的结果——正如我所说，这可能是一个边缘情况，在这样的模拟器中无法正确呈现。使用BrowserStack 之类的服务可以更准确地了解它在实际设备上的外观（它们预先提供了大量的免费测试时间）。