根据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，但我之前没有and在 CSS 文件中使用过。
为什么and需要空格字符？
正如您所说，媒体查询本身用于过滤 WebKit，因为它使用了一个-webkit-属性。
当您说它无法识别时，Chrome 只是有点严格
@media screen and(-webkit-min-device-pixel-ratio:0)
因为那实际上是无效的 CSS。and关键字后面的空格很重要。这在CSS3 媒体查询规范中有明确说明：
例 20
以下是格式错误的媒体查询，因为“和”和表达式之间没有空格是不允许的。（这是为功能符号语法保留的。）
@media all and(color) { … }
函数符号指的是url(),rgb()和rgba(). 如您所见，在这些示例中，函数名称和左括号之间没有空格。
and不是一个函数，而只是一个关键字，表示媒体查询必须匹配您指定的媒体，并且布局引擎必须满足您放置在它后面的表达式。周围的括号-webkit-min-device-pixel-ratio:0只是将其表示为表达式。
附录：是的，这确实意味着您的 CSS 优化器有错误；）
这是 YUI 压缩器的特殊评论的快速解决方法。
@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) { ... }
该问题已在当前 (2.4.5) 版本中修复
只使用这个：
@media(-webkit-min-device-pixel-ratio:0) {
}