Question

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

不幸的是，Webkit在移动触摸设备上占据主导地位，所以有人知道是否有Webkit等价物吗？

（理想情况下，如果这是由CSS3媒体查询管理的话会很好）

修改： Looks like it is supported in Gecko as a media query

Answer 1

目前没有办法使用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应该优化一些重复。（我希望你使用压缩。）

Answer 2

在Ian Wessman的回答中，测试!!window.TouchEvent工作不正常。在当前的桌面Chrome（23.0.1271.52，Linux）中window.TouchEvent是一个函数，因此Ian的代码认为浏览器已启用触摸功能。

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

Answer 3

Chrome是另一种试图实现类似选择器的浏览器，但遗憾的是它暂时被删除了。

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