7

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

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

(理想情况下,最好由 CSS3 媒体查询管理)

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

4

3 回答 3

5

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

于 2011-06-16T17:47:51.877 回答
2

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

如果您想要短代码,最好从 Modernizr 复制粘贴相关代码

于 2012-10-28T10:09:12.563 回答
1

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

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

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

于 2011-04-07T15:29:15.393 回答