仅使用 CSS 即可避免 PWA 中出现凹槽

在工作中，我通常使用 Swift 和 React Native 开发原生移动应用。但对于一个新项目，我们决定采用渐进式 Web 应用（PWA）。我精通 HTML、CSS 和 JavaScript，所以觉得应该不会有什么问题。

一切都按计划进行，直到我们遇到了一个新的敌人：iPhone X。

本土背景

在自然界中，我们有一个叫做安全区域的东西，一个“盒子”，我们可以把东西放在里面，确保它们不会碰到凹槽和底部区域。

这样就可以轻松地告诉应用程序将某个组件放置在屏幕顶部，但如果屏幕顶部有凹槽挡住，则将其稍微向下移动一点。

对于 PWA 来说，避免底部烦人的工具栏最简单的方法是添加一些样式padding-bottom，但这会破坏其他所有设备。我曾想过用 JavaScript 有条件地添加 CSS 类，但这感觉像是一种变通方法。

如您所知，我们现在可以使用自定义 CSS 变量var(--padding-bottom)。同样，浏览器也可以定义自己的自定义变量。虽然浏览器正在进行标准化，但苹果已经创建了一些自己的自定义变量。



.navbar {
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

我们为尚不支持环境变量的浏览器定义了底部内边距。如果我们省略第一条规则，第二条规则就会失效，所有规则都将失效。

对于支持该功能的浏览器，我们希望底部内边距等于，如果未设置该变量，safe-area-inset-bottom则回退到。0