デバイスがタッチスクリーンかどうかを検出するメディアクエリ

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

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

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

ただし、CSSを使用すると、たとえばFirefoxのような疑似クラスがあります。あなたは使用することができます：-moz-システム・メトリック（タッチ対応します）。ただし、これらの機能はすべてのブラウザで利用できるわけではありません。

以下のためのAppleデバイスは、簡単な使用をすることができます：

if(window.TouchEvent) {
   //.....
}

特にiPadの場合：

if(window.Touch) {
    //....
}

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

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

タッチ要素のスタイル

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

CSS4メディアクエリドラフトには、このためのプロパティが実際にあります。

「ポインター」メディア機能は、マウスなどのポインティングデバイスの存在と正確さについてクエリするために使用されます。デバイスに複数の入力メカニズムがある場合は、UAが主要な入力メカニズムの最も機能の低いポインティングデバイスの特性を報告することをお勧めします。このメディアクエリは次の値を取ります。

'none'-
デバイスの入力メカニズムにはポインティングデバイスは含まれません。

「粗い」
-デバイスの入力メカニズムには、限られた精度のポインティングデバイスが含まれます。

「細かい」
-デバイスの入力メカニズムには、正確なポインティングデバイスが含まれます。

これはそのまま使用されます。

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

これに関連するChromiumプロジェクトでもチケットを見つけました。

ブラウザの互換性はQuirksmodeでテストできます。これらは私の結果です（2013年1月22日）：

• Chrome / Win：機能
• Chrome / iOS：機能しません
• Safari / iOS6：機能しません

2013年半ばの時点で、CSSソリューションは広く利用可能ではないようです。代わりに...

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 {
       ...
   }

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

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>

2017年、2番目の回答からのCSSメディアクエリはFirefoxではまだ機能しません。そのためのソリューションを見つけました：-moz-touch-enabled

だから、ここにクロスブラウザのメディアクエリがあります：

@media (-moz-touch-enabled: 1), (pointer:coarse) {
    .something {
        its: working;
    }
}

実際にはそのためのメディアクエリがあります：

@media (hover: none) { … }

Firefoxは別として、かなりサポートされています。SafariとChromeはモバイルデバイスで最も一般的なブラウザであるため、採用がさらに進むまでは十分かもしれません。

これは機能します。知らない場合

@media (hover: none) and (pointer: coarse) {
    /* Touch screen device style goes here */
}

編集：ホバーオンデマンドはサポートされなくなりました

このソリューションは、CSS4がすべてのブラウザーでグローバルにサポートされるまで機能します。その日が来たら、CSS4を使用してください。それまでは、これは現在のブラウザで動作します。

browser-util.js

export const isMobile = {
  android: () => navigator.userAgent.match(/Android/i),
  blackberry: () => navigator.userAgent.match(/BlackBerry/i),
  ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
  opera: () => navigator.userAgent.match(/Opera Mini/i),
  windows: () => navigator.userAgent.match(/IEMobile/i),
  any: () => (isMobile.android() || isMobile.blackberry() || 
  isMobile.ios() || isMobile.opera() || isMobile.windows())
};

onload：

古い方法：

isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;

新しい方法：

isMobile.any() ? document.body.classList.add('is-touch') : null;

上記のコードは、デバイスにタッチスクリーンがある場合、「is-touch」クラスをbodyタグに追加します。これで、：hoverのcssがあるWebアプリケーションの任意の場所で、呼び出すことができますbody:not(.is-touch) the_rest_of_my_css:hover

例えば：

button:hover

になる：

body:not(.is-touch) button:hover

このソリューションでは、modernizer libが非常に大きなライブラリであるため、modernizerの使用を避けています。タッチスクリーンを検出するだけの場合は、最終的なコンパイル済みソースのサイズが要件である場合に最適です。

JSまたはjQueryを使用してボディにクラスタッチスクリーンを追加する

  //allowing mobile only css
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").attr("class",'touchscreen');
    }

私はこれを使用してこの問題を解決することができました

@media (hover:none), (hover:on-demand) { 
Your class or ID{
attributes
}    
}