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

Question

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

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

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

编辑： 看起来 Gecko 支持它作为媒体查询

score 5 · Accepted Answer

目前，如果不求助于 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 应该优化掉一些重复。（我希望你正在使用压缩。）

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

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

3 回答 3