webkit - :-moz-system-metric (タッチ対応) に相当する Webkit

Question

:-moz-system-metric(touch-enabled)は、モバイルサイトで作業するための非常に便利な CSS セレクターのように見えます。

残念ながら、モバイルタッチデバイスでは Webkit が優勢です。Webkit に相当するものがあるかどうか知っている人はいますか?

(理想的には、これが CSS3 メディアクエリによって管理されているとよいでしょう)

編集： メディアクエリとしてGeckoでサポートされているようです

score 5 · Accepted Answer

現在のところ、Javascript に頼らずにこれを達成する方法はありません。

@easwee が言ったように、Modernizrは機能検出に重点を置いた定評のある JS ライブラリです。ユースケースにそのtouchテストを使用できます。

Modernizr のすべての機能が必要ない場合は、次の操作を実行できます。

<body>A) 次の 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