JavaScriptを使用したタッチスクリーンデバイスの検出

Javascript / jQueryでは、クライアントデバイスにマウスがあるかどうかをどのように検出できますか？

ユーザーがアイテムの上にマウスを置いたときに小さな情報パネルを上にスライドするサイトがあります。ホバーを検出するためにjQuery.hoverIntentを使用していますが、これは明らかにiPhone、iPad、Androidなどのタッチスクリーンデバイスでは機能しません。これらのデバイスでは、タップして情報パネルを表示するように戻します。

+1 hoverとclickその両方。もう1つの方法は、CSSメディアクエリを使用して、タッチ/タップ機能を備えている可能性が最も高い、より小さな画面/モバイルデバイスに対してのみいくつかのスタイルを使用することです。したがって、CSSを介して特定のスタイルがあり、jQueryからそれらの要素をチェックしてモバイルデバイスのスタイルプロパティを確認すると、それらに接続してモバイル固有のコードを記述できます。

こちらをご覧ください：http : //www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

注：デバイスがタッチイベントをサポートしているからといって、必ずしもタッチスクリーンデバイスのみであるとは限りません。多くのデバイス（私のAsus Zenbookなど）は、実際のタッチ入力メカニズムがない場合でも、クリックイベントとタッチイベントの両方をサポートしています。タッチサポート用に設計する場合は、常にクリックイベントサポートを含め、デバイスがどちらか一方だけであると想定しないでください。

window.TouchのテストはAndroidでは機能しませんでしたが、これは機能します。

function is_touch_device() {
  return !!('ontouchstart' in window);
}

記事を参照してください：JavaScriptを使用して「タッチスクリーン」デバイスを検出する最良の方法は何ですか？

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

msTouchPointsと一緒にmaxTouchPointsを使用する理由：

Microsoftは、Internet Explorer 11以降、このプロパティのプレフィックスバージョン（msMaxTouchPoints）のMicrosoftベンダーを削除する可能性があると述べており、代わりにmaxTouchPointsを使用することを推奨しています。

ソース：http : //ctrlq.org/code/19616-detect-touch-screen-javascript

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

どこでも動作します!!

私が使う：

if(jQuery.support.touch){
    alert('Touch enabled');
}

jQuery mobile 1.0.1

Google Chromeはこれについて誤検知を返すようです：

var isTouch = 'ontouchstart' in document.documentElement;

「タッチイベントをエミュレート」する機能（F12->右下の設定->「オーバーライド」タブ->最後のチェックボックス）に何らかの関係があると思います。デフォルトで無効になっていることはわかっていますが、結果の変更と関連付けます（Chromeで使用される「in」メソッド）。しかし、私がテストした限り、これは機能しているようです：

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

typeofが「オブジェクト」である状態でそのコードを実行したすべてのブラウザーですが、未定義以外のすべてであることを知っていると、私はより確信します:-)

IE7、IE8、IE9、IE10、Chrome 23.0.1271.64、Chrome for iPad 21.0.1180.80およびiPad Safariでテスト済み。誰かがさらにいくつかのテストを行い、結果を共有するのは素晴らしいことです。

私のサイトの1つにこれを書いて、おそらく最も確実なソリューションです。特に、Modernizrでもタッチ検出で誤検知が発生する可能性があるためです。

jQueryを使用している場合

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

または単に純粋なJS ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

私の最初の投稿/コメント：「タッチスタート」がクリックの前にトリガーされることは誰もが知っています。また、ユーザーがページを開いたときに、1）マウスを動かす2）クリックする3）画面をタッチする（スクロールする、または... :)）

何か試してみましょう：

//->開始：jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <-終了：jQuery

ごきげんよう！

ディスカッションで上記のコードをテストしました

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

Android Mozilla、Chrome、Opera、Androidのデフォルトブラウザー、iPhoneのSafariで動作します。

私にはしっかりしているようです:)

タッチイベントを検出するためのModernizrソース内からリンクされた、件名に関する役立つブログ投稿。結論：JavaScriptからタッチスクリーンデバイスを確実に検出することはできません。

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

これは私にとってはうまくいきます：

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

あなたが使用している場合はModernizrを、それは非常に使いやすいですModernizr.touch先に述べたように。

ただし、Modernizr.touch安全のために、とユーザーエージェントのテストを組み合わせて使用​​することを好みます。

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Modernizrを使用しない場合は、Modernizr.touch上記の関数を次のように置き換えるだけです。('ontouchstart' in document.documentElement)

また、ユーザーエージェントをテストするiemobileと、検出されたMicrosoftモバイルデバイスの範囲がより広くなることに注意してくださいWindows Phone。

このSOの質問も見てください

jQuery Mobileでは、簡単に次のことができます。

$.support.touch

なぜこれが文書化されていないのかわかりませんが、クロスブラウザに対して安全です（現在のブラウザの最新2バージョン）。

すでに述べたように、デバイスはマウスとタッチ入力の両方をサポートする場合があります。多くの場合、質問は「サポートされているもの」ではなく「現在使用されているもの」です。

この場合、マウスイベント（ホバーリスナーを含む）とタッチイベントを同様に登録するだけです。

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScriptは、ユーザー入力に基づいて適切なリスナーを自動的に呼び出す必要があります。したがって、タッチイベントの場合は、onTouchStartCallbackホバーコードをエミュレートして発生します。

タッチは、タッチとマウスの両方のリスナーを起動する可能性があることに注意してください。ただし、タッチリスナーが最初に表示され、を呼び出すことにより、後続のマウスリスナーが起動しないようにすることができevent.preventDefault()ます。

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

さらに読むにはここ。

私が使用しているiPad開発では：

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

次に、タッチベースのイベント（例：ontouchstart）またはマウスベースのイベント（例：onmousedown）に選択的にバインドできます。私はまだアンドロイドでテストしていません。