Webkit相当于:-moz-system-metric(启用触摸)

ede*_*ett 7 css webkit touch css3 media-queries

:-moz-system-metric(启用触摸)看起来像一个非常有用的CSS选择器,用于在移动网站上工作.

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

(理想情况下,如果这是由CSS3媒体查询管理的话会很好)

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

小智 5

目前,如果不诉诸Javascript,就无法实现这一目标.

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

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

A)尽可能早地在<body>标签中加载以下JS :

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

B)写你的CSS.由于Gecko使用媒体查询来通知您触摸可用性,因此您必须使用特定于触摸的CSS,如下所示:

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

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

}
Run Code Online (Sandbox Code Playgroud)

如果每个选择器代码在两种情况下都相同,那么GZIP应该优化一些重复.(我希望你使用压缩.)


eas*_*wee 1

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

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

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