web-dev-qa-db-ja.com

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

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

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

javascriptjqueryiphoneandroid
126
Brad Robinson

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

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

12
Moin Zaman
var isTouchDevice = 'ontouchstart' in document.documentElement;

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

265
KevBurnsJr

Window.TouchはAndroidで動作しませんでしたが、これは動作します：

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

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

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

MsTouchPointsとともにmaxTouchPointsを使用する理由：

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

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

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

どこでも動作します!!

7
Code Spy

Google Chromeは、これに関して誤検知を返すようです：

var isTouch = 'ontouchstart' in document.documentElement;

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

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

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

IE21、0.1180.80およびiPad SafariのIE7、IE8、IE9、IE10、Chrome 23.0.1271.64、Chromeでテスト済み。誰かがさらにテストを行い、結果を共有してくれるといいですね。

4
Ash

私が使う：

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

jQuery mobile 1.0.1で

4
Mark

私の最初の投稿/コメント：クリックの前に「タッチスタート」がトリガーされることは誰もが知っています。また、ユーザーがページを開くと、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

ごきげんよう！

4
silassare

私のサイトの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";
}
4
Timothy Perez

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

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

3
Mike S

私は議論で上記の次のコードをテストしました

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

Android Mozilla、Chrome、Opera、Android iphoneのデフォルトのブラウザおよびサファリで動作します...すべてプラス...

私にとってはしっかりしているようだ:)

3
Prasad

これは私のために働く：

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

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をテストすると、Windows Phoneよりも広範なMicrosoftモバイルデバイスが検出されることに注意してください。

このSOの質問も参照

1
Peter-Pan

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

$.support.touch

なぜこれがそれほど文書化されていないのかわかりません..しかし、それはクロスブラウザセーフです（現在のブラウザの最新の2つのバージョン）。

1
OZZIE