哪些浏览器已经支持媒体查询4级？

Question

哪些浏览器已经支持这些属性？ http://dev.w3.org/csswg/mediaqueries4/

例如，在iOS7、iPhone 4S上不起作用。

@media (luminosity: normal) {
    body {
        background: #f5f5f5;
        color: #262626;
    }
}

@media (luminosity: dim) {
    body {
        background: #e9e4e3;
    }
}

@media (luminosity: washed) {
    body {
        background: #ffffff;
    }
}

- fabian

---

Luminosity可以在iOS7和Android 4上运行。 - Alex

OP，@Pinal；显然，将您想要的内容发布出来会更好，而不是链接整个文档，并在用户没有完全阅读时感到沮丧。很明显，这个问题可以通过提供更具体的细节来改进。 - agconti

亮度似乎在iOS7（iPhone 4S）上无法工作。 - fabian

Answer 1

2022年7月更新:

Chrome从版本104开始支持此功能，但仍然缺乏Android版Chrome以及iPhone和Mac的Safari的支持。（不必担心IE，因为它已经被Microsoft停止支持）

---

现在至少在Firefox上可以使用了。因此，您现在可以编写以下类似的媒体查询：

@media (width <= 30em) { ... }

- Nivethan

Answer 2

在 CanIUse 网站上，你可以找到许多 CSS 属性的最新支持情况。在这个特定的情况下，一些 Level 4 媒体已经被支持，即使不是标准方式，例如：

1. "用于查找媒体查询是否适用于文档的 API"
2. "访问外部设备数据的方法（如网络摄像头视频流）"

- Luca Detomi

---

新的4级语法选项非常具体，一般的“有时支持”的回答并不能很好地回答问题。 - worc

我们正在2020年，但是caniuse缺少对css4媒体查询的支持。虽然有css3媒体查询，但这个规范已经存在了十年，没有什么新意。 - revelt

Answer 3

我认为你不能做到，因为一些常见的不支持媒体查询的浏览器，如Firefox、Opera和IE*！以下是一些相关资源：特性：媒体查询：交互媒体特性

- oussama benchkroune

---

在我看来，我建议以符合问题的形式提供答案。例如：问：谁会说德语？答：Marco和Clara会。此外，请更加注意拼写错误。我还建议提供外部链接页面的摘录或更完整的摘要。这样，在链接页面消失的情况下，您的答案就是自洽的。关于答案，Edge是目前微软参考浏览器，而Firefox似乎是唯一缺乏支持的大型浏览器。 - Fabiano Tarlao

在我看来，你可以根据我的建议改进你的答案。 - Fabiano Tarlao

Answer 4

PPK正在生成一些媒体查询支持表并且还有您可以使用自己的测试。

规范仍处于草案阶段，您可以尝试使用移动Firefox，因为它通过JavaScript支持某些亮度。

- Ruskin

---

刚在我的iOS7 iPhone 4上测试了一下 - 在Safari和Chrome上都不支持（Chrome基于Safari，所以这并不奇怪）。 - Ruskin

Answer 5

MDN有每个特性支持表格，适用于媒体查询。这似乎是获取此信息的最佳选项。

- Sean McMillan