@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...
}

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

综上所述，您真的不应该测试特定的 device/browser 组合。相反，您应该构建能够适应不同设备的代码。意思是任何 phone 与 iPhone X.

Answer 2

对于 height 属性，您不需要使用 @supports，因为任何无法识别 env() 或 constant() 的浏览器] 将回退到您的默认值（calc(100% - 90px) 或 100%）。

至于@supports的使用方法，可以任意CSSproperty/value组合使用。它检测用户的浏览器是否支持特定的 CSS 功能。一些例子：

@supports (display: grid) { /* Browser supports grid layout */ }
@supports (color: #ffff) { /* Browser supports RGBA hex colors */ }
@supports (--foo: 123) { /* Browser supports CSS variables */ }

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

How @supports directive works in Safari iOS

css

safari

ios

web

responsive

怎么回事。

设备测试