[解決済み] デバイスがタッチスクリーンかどうかを検出するためのメディアクエリ

質問

タッチスクリーンデバイスでないときに、メディアクエリを使用して何かを実現する最も安全な方法は何でしょうか。方法がない場合、次のようなJavaScriptのソリューションを使用することをお勧めしますか？ !window.Touch や Modernizr などの JavaScript ソリューションを使用することをお勧めしますか?

どのように解決するのですか？

現在では、CSS メディアクエリを使用して、特定のインタラクティブ機能を持つデバイス用のスタイルを定義することができ、それは が広くサポートされています。 にも対応しています。

ホバー などは、ユーザーの主な入力メカニズムが要素の上にホバーできるかをテストするために使用できます（タッチ対応デバイスではエミュレートしないと真値にはなりません）。

@media (hover: none) {
  a {
    background: yellow;
  }
}

その他の対話型テストは、ポインタ、任意のポインタ、ホバー、および任意のホバーです。

前の回答

私は、以下のものを使用することをお勧めします。 モダナイザー を使用し、そのメディアクエリ機能を使用することをお勧めします。

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc. and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc.
}

しかし、CSSを使うと、例えばFirefoxのような擬似クラスが存在します。この場合 :-moz-system-metric(touch-enabled) . しかし、これらの機能はすべてのブラウザで利用できるわけではありません。

については アップル デバイスの場合は、単純に

if (TouchEvent) {
   //...
}

特にiPad向け。

if (Touch) {
    // ...
}

しかし、これらの は Android では動作しません。 .

モダニズル は特徴検出機能を備えており、特徴を検出することは、ブラウザを基準にコーディングするよりも ブラウザを基準にしたコーディングではなく、機能を検出することは良い方法です。

タッチ要素のスタイリング

Modernizer は、まさにこの目的のために HTML タグにクラスを追加します。この場合 touch と no-touch というように、セレクタの前に.touchを付けることで、タッチ関連のアスペクトをスタイルすることができます。 .touch .your-container . ^{クレジット Ben Swinburne}