“@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是啥？

Posted 2023-03-06

【中文标题】“@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是啥？

【英文标题】：What's the semantic of "@media screen and (-webkit-min-device-pixel-ratio:0)"?“@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是什么？

【发布时间】：2011-05-05 11:27:08

【问题描述】：

根据http://www.webmonkey.com/2010/02/browser-specific_css_hacks/，我碰巧对基于 WebKit 的浏览器使用了以下 CSS hack。

@media screen and (-webkit-min-device-pixel-ratio:0) 
    #my-id  height: 100%; 

它有效。但是，后来我发现它在生产环境中不起作用。我发现这是由于 CSS 优化器修剪了and 之后的空间。 Chrome 无法识别以下 CSS。

@media screen and(-webkit-min-device-pixel-ratio:0) 
    #my-id  height: 100%; 

那么，@media screen and (-webkit-min-device-pixel-ratio:0) 到底是什么意思？

我知道@media screen，但我之前没有在 CSS 文件中使用过and。

为什么and 后面的空格字符是必须的？

【问题讨论】：

从技术上讲，我不认为这是一个 CSS hack。这并不是这些语言功能的用途，但由于使用了-webkit-min-device-pixel-ratio:0，它非常有效地识别了 WebKit。不那么老套的黑客之一。

另见***.com/questions/4144706/…

【参考方案1】：

正如您所说，媒体查询本身用于过滤 WebKit，因为它使用 -webkit- 属性。

当你说它无法识别时，Chrome 只是有点严格

@media screen and(-webkit-min-device-pixel-ratio:0)

因为那实际上是无效的 CSS。 and 关键字后面的空格很重要。这在CSS3 media query spec中有明确说明：

示例 20

以下是格式错误的媒体查询，因为“and”和表达式之间没有空格是不允许的。 （这是为功能符号语法保留的。）

@media all and(color)  … 

函数符号指的是url()、rgb() 和rgba()。如您所见，在这些示例中，函数名称和左括号之间没有空格。

and 不是一个函数，而只是一个关键字，表示媒体查询必须与您指定的媒体相匹配，并且布局引擎必须满足您放置在它之后的表达式。 -webkit-min-device-pixel-ratio:0 周围的括号只是将其表示为一个表达式。

附录： 是的，这确实意味着您的 CSS 优化器有错误 ;)

【讨论】：

我想我刚刚遇到了同样的错误 - YUI Compressor。

@Matt Ball：哦，那你或许应该提交一份报告。

Just did，虽然显然我在写 "WikiSyntax" 时很笨...我到处都需要 MarkDown，该死

@MattBall - 与 YUI 相同的问题

【参考方案2】：

这里是 YUI 压缩器的特殊注释的快速解决方法。

@media screen and/*!*/(-webkit-min-device-pixel-ratio:0)  ... 

该问题已在当前 (2.4.5) 版本中修复

https://github.com/yui/yuicompressor/blob/master/src/com/yahoo/platform/yui/compressor/CssCompressor.java#L180

【讨论】：

+1 用于此快速修复。我正在使用 'yuicompressor-maven-plugin'，它仍在使用 2.4.2。

修复适用于 ajaxminifier ... 非常感谢。语法：@media screen/*!*/and/*!*/(-webkit-min-device-pixel-ratio:0)

【参考方案3】：

只用这个：

@media(-webkit-min-device-pixel-ratio:0) 

【讨论】：

请解释一下？

使用这个来为基于 WebKit 的浏览器应用 CSS ，把它想象成 (webkit) 做某事