ios - @supports 指令如何在 Safari iOS 中工作

Question

我的 Web 应用程序具有响应能力，并且我必须支持 iOS 10 及更高版本。 我有一个高度是动态的容器。为了处理 iPhone X 布局，我使用 @supports 指令，如下所述:iPhone X layout features with CSS Environment variables .

这是我迄今为止实现的代码(不考虑 90px 因为这只是一个示例):

const wrapperWhenCollapsed = {
  height: 'calc(100% - 90px)',
  '@supports (padding-top: constant(safe-area-inset-top))': {
    height: 'calc(100% - 90px - constant(safe-area-inset-bottom))',
  },
  '@supports (padding-top: env(safe-area-inset-top))': {
    height: 'calc(100% - 90px - env(safe-area-inset-bottom))',
  },
};

const wrapperWhenExpanded = {
  height: '100%',
  '@supports (padding-top: constant(safe-area-inset-top))': {
    height: 'calc(100% - constant(safe-area-inset-bottom))',
  },
  '@supports (padding-top: env(safe-area-inset-top))': {
    height: 'calc(100% - env(safe-area-inset-bottom))',
  },
};

基于此我有几个问题:

• @supports 指令中 padding-top 的用途是什么？
• 有没有办法在不使用 padding-top 的情况下使用 @supports 指令？

我的目标是验证浏览器支持 constant 或 env。如果没有，则应用回退值。

谢谢，洛伦佐

Answer 1

发生了什么事。

认为@supports与@media相同，它基本上是浏览器理解的if/else检查。

对于@supports，您需要提供有效的CSS规则来解析。问题在于 CSS env() 是 CSS 中值声明的一部分。因此，要正确匹配为“有效”@supports 需要一个匹配的属性名称来检查整个规则是否有效。

由于 env() 作为布局声明的一部分是有效的，因此选择了 padding-top。您可能可以使用 padding、margin 等代替。 它必须是有效的可解析规则。

---

设备测试

如果您的目标是针对特定设备，那么我在使用 @supports 时会非常小心，因为它的目的是告诉您浏览器可以做什么，而不是具体说明正在使用什么设备。 Chrome、Firefox、Safari 等都会告诉您 env() is valid 。虽然只有 Safari(旧版本)支持 constant() 代替 env()。 现已弃用。

在这种情况下，您真正​​测试的是 safe-area-inset-* 存在并且具有一个值，而不是 CSS 渲染引擎支持特定属性。

---

由于您使用 Javascript 来设置此值，因此您应该能够避免所有 @supports 内容，而只需使用 JS 测试变量即可。 (我没有测试过这个，因为我无权访问该设备)

var safe = getComputedStyle(document.body).getPropertyValue('safe-area-inset-top');
if(safe && safe != null) {
  // is iPhoneX so do your thing
  // or maybe another phone with a notch...
}

注意，如果它有效，我不知道您到底应该期待什么。但我假设您会得到一个像素尺寸，因此请测试它是否存在以及是否有一个值。

---

尽管如此，您确实不应该测试特定的设备/浏览器组合。相反，您应该构建适应不同设备的代码。意思是任何有刘海的手机与 iPhone X 的对比。