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

时间:2010-07-30 15:51:58

标签: css webkit css3 touch media-queries

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

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

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

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

3 个答案:

答案 0 :(得分: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应该优化一些重复。 (我希望你使用压缩。)

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

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

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

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