web-dev-qa-db-ja.com

クライアントがタッチデバイスかどうかを確認する方法

ユーザーがタッチデバイスを使用しているかどうかを確認するための素敵でクリーンな方法やトリックはありますか？

var isiPad = navigator.userAgent.match(/iPad/i) != null;のようなものがあることを知っています

しかし、ユーザーがタッチデバイスを使用しているかどうかを一般的に判断するためのトリックがあるのではないかと思います。それは、iPadだけでなく、もっと多くのタッチデバイスとタブレットがあるからです。

ありがとうございました。

javascriptjquerytouchtablet
29
matt

次のJS関数を使用できます。

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
   return typeof el.ongesturestart === "function";
}

ソース： タッチベースのブラウジングの検出 。

上記のコードは、ブラウザーがデバイスではなくタッチをサポートしているかどうかのみをテストすることに注意してください。

関連リンク：

モバイル用jquery および jtouch で検出される場合があります

28
mplungjan
if ("ontouchstart" in document.documentElement)
{
  alert("It's a touch screen device.");
}
else
{
 alert("Others devices");
}

あちこちをブラウズして見つけた最も単純なコード

14
Pratswinz

modernizer を含めます。これは小さな機能検出ライブラリです。次に、以下のようなものを使用できます。

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

document.createEvent("TouchEvent")の使用は、デスクトップデバイスでは機能しません。したがって、ifステートメント内で使用できます。

この方法では、非タッチデバイスでエラーが発生する可能性があることに注意してください。 document.documentElementのontouchstartを確認することをお勧めします。

4
Julian F. Weinert

これを確認してください post 、タッチデバイスが検出されたときの処理またはtouchstartイベントが呼び出された場合の処理​​について、本当に素晴らしいコードスニペットを提供します：

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}
2
Safran Ali

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質問

1
Peter-Pan