Webkit 相当于 :-moz-system-metric(touch-enabled)答案

【问题标题】：Webkit equivalent of :-moz-system-metric(touch-enabled)Webkit 相当于 :-moz-system-metric(touch-enabled)
【发布时间】：2011-03-23 08:06:10
【问题描述】：

:-moz-system-metric(touch-enabled) 看起来是一个非常有用的用于移动网站的 CSS 选择器。

不幸的是，Webkit 在移动触摸设备上占主导地位，所以有人知道是否有与 Webkit 相当的产品吗？

（理想情况下，最好由 CSS3 媒体查询管理）

编辑： Looks like it is supported in Gecko as a media query

【问题讨论】：

标签： webkit css touch media-queries

【解决方案1】：

在 Ian Wessman 的回答中，测试 !!window.TouchEvent 工作不正确。在当前桌面 Chrome (23.0.1271.52, Linux) window.TouchEvent 是一个函数，所以 Ian 的代码认为浏览器支持触摸。

如果您想要短代码，最好复制粘贴relevant code from Modernizr。

【讨论】：

github.com/Modernizr/Modernizr/blob/master/feature-detects/…

【解决方案2】：

目前，如果不使用 Javascript，则无法完成此操作。

正如@easwee 所说，Modernizr 是一个备受推崇的 JS 库，专注于特征检测。您可以将其touch 测试用于您的用例。

如果您不需要 Modernizr 的所有花里胡哨，您可以执行以下操作：

A) 尽早在 <body> 标记中加载以下 JS：

<script type="text/javascript">
if( !!window.TouchEvent ) body.className += " touch-enabled ";
</script>

B) 编写你的 CSS。由于 Gecko 使用媒体查询来通知您触摸可用性，因此您必须欺骗特定于触摸的 CSS，如下所示：

BODY.touch-enabled DIV.foo
{
    /* touch-specific CSS */
}

@media screen and (-moz-touch-enabled)
{
DIV.foo
{
    /* touch-specific CSS */
}

}

如果每个选择器的代码在两种情况下都相同，GZIP 应该优化掉一些重复。（我希望你正在使用压缩。）

【讨论】：

【解决方案3】：

Chrome 是另一个尝试实现类似选择器的浏览器，但不幸的是它现在被移除了。

Modernizr 可能是一个有趣的检测工具，因为它也可以检测触摸事件。

http://www.modernizr.com/docs/#touch

【讨论】：