web-dev-qa-db-ja.com

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

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

csstouchmedia-queries
113
JJJollyjim

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(window.TouchEvent) {
   //.....
}

特にiPadの場合：

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

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

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

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

Modernizerは、この正確な目的のためにHTMLタグにクラスを追加します。この場合は、touchおよびno-touchであるため、セレクターの先頭に.touchを付けることで、タッチ関連の側面をスタイルできます。例えば.touch .your-container。 クレジット：Ben Swinburne

38
Starx

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

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

「なし」
-デバイスの入力メカニズムには、ポインティングデバイスは含まれていません。

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

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

これは次のように使用されます。

/* 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：機能しません
151
Znarkus

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

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

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

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

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

    .no-touch .myClass {
    ...
}
.touch .myClass {
    ...
}
49
Simon East

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

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>
34
Alex W

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

したがって、クロスブラウザメディアクエリは次のとおりです。

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

実際にはメディアクエリがあります。

@media (hover: none) { … }

Firefoxとは別に、 かなりよくサポートされています です。 SafariおよびChromeは、モバイルデバイスで最も一般的なブラウザであるため、採用が拡大するまで十分です。

16
Buzut

このソリューションは、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())
};

オンロード：

古い方法：

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

新しい方法：

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

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

例えば：

button:hover

になる：

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

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

3
Patrick W. McMahon

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

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

これを使用してこの問題を解決できました

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