144

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

4

11 に答える 11

180
于 2013-01-22T11:31:39.223 に答える
60

現在、CSSメディアクエリを使用して、特定のインタラクティブ機能を備えたデバイスのスタイルを定義でき、広くサポートされています。

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

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

その他のインタラクティブなテストは、ポインター、任意のポインター、ホバー、および任意のホバーです。

前の回答

modernizrとそのメディアクエリ機能を使用することをお勧めします。

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）を使用できます。ただし、これらの機能はすべてのブラウザで利用できるわけではありません。

Appleデバイスの場合、次を使用できます。

if (TouchEvent) {
   //...
}

特にiPadの場合：

if (Touch) {
    // ...
}

ただし、これらはAndroidでは機能しません。

Modernizrは機能検出機能を提供します。機能の検出は、ブラウザーに基づいてコーディングするのではなく、コーディングするための優れた方法です。

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

Modernizerは、まさにこの目的のためにHTMLタグにクラスを追加します。この場合、セレクターの前に.touchを付けることで、タッチ関連の側面のスタイルを設定できますtouch。no-touch例：.touch .your-container。クレジット：Ben Swinburne

于 2012-07-09T00:31:43.280 に答える
56

CSS ソリューションは、2013 年半ばの時点で広く利用できるようには見えません。その代わり...

  1. Nicholas Zakas はno-touch、ブラウザーがタッチをサポートしていない場合にModernizr が CSS クラスを適用すると説明しています。

  2. または、単純なコードを使用して JavaScript で検出し、独自の Modernizr のようなソリューションを実装できます。

    <script>
    document.documentElement.className += 
    (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>

    次に、CSS を次のように記述できます。

    .no-touch .myClass {
    ...
}
.touch .myClass {
    ...
}
于 2013-08-23T07:44:46.950 に答える
38

メディア タイプでは、標準の一部としてタッチ機能を検出できません。

http://www.w3.org/TR/css3-mediaqueries/

そのため、 CSS やメディア クエリを介して一貫して行う方法はなく、 JavaScript に頼る必要があります。

Modernizr を使用する必要はありません。プレーンな JavaScript を使用できます。

<script type="text/javascript">
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) alert("touch is enabled!");
</script>
于 2012-07-09T00:36:41.337 に答える