Webkit等效：-moz-system-metric（启用触摸） [英] Webkit equivalent of :-moz-system-metric(touch-enabled)

问题描述

：-moz-system-metric（触摸启用）看起来像一个真正有用的CSS选择器，在移动网站上工作。

:-moz-system-metric(touch-enabled) looks like a really useful CSS selector for working on mobile sites.

不幸的是，Webkit在移动触摸设备上占据主导地位，因此任何人都知道是否有Webkit等效项。

Unfortunately Webkit is dominant on mobile touch devices so does anyone know if there is a Webkit equivalent?

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

(Ideally it'd be good if this was managed by CSS3 media queries)

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

推荐答案

目前没有办法使用Javascript，无法实现这一点。

There's no way to accomplish this without resorting to Javascript, at present.

如@easwee所说， Modernizr 是一个着名的JS库，专注于特征检测。您可以使用其 touch 测试用于您的用例。

As @easwee said, Modernizr is a well-regarded JS library that focuses on feature detection. You can use its touch test for your use case.

如果您不需要Modernizr的所有铃声和可以执行以下操作：

If you don't need all of Modernizr's bells and whistles, you can do the following:

A）在< body> 标记：

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

B）编写CSS。由于Gecko使用媒体查询来通知您触摸可用性，因此您必须复制触摸特定的CSS，如下所示：

B) Write your CSS. Since Gecko uses a media query to inform you of touch availability, you'll have to dupe the touch-specific CSS, like so:

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

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

}

如果每个选择器代码在两种情况下都是相同的，GZIP应该优化掉一些重复。 （您使用压缩，我希望。）

If the per-selector code is identical in both circumstances, GZIP ought to optimize away some of the duplication. (You are using compression, I hope.)

这篇关于Webkit等效：-moz-system-metric（启用触摸）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！