JavaScript

レシピ

ブラウザ

端末がタッチ(タップ)に対応しているか確認する

ブラウザを表示している端末がタッチ可能かどうかを調べる方法について解説します。

この記事のポイント

  • 端末がタッチに対応しているかを調べる
  • PCのブラウザのエミュレータでiOS/Androidにしてもタッチ対応と判定する

タッチに対応しているか判定する

イベントハンドラのontouchstartプロパティはブラウザを表示している端末がタッチに対応しているときは存在し、対応していない場合は存在しない状態になります。
そこで、このプロパティが「undefined」かどうかを調べることがまず1つのヒントとなります。

iPhoneでwindow.ontouchstartを参照
iPhoneでwindow.ontouchstartを参照

加えて、同時に対応できるタッチの数をnavigatorオブジェクトmaxTouchPointsプロパティから参照することで、より確実にタッチに対応しているかを調べることができます。
このタッチの数は1以上であればタッチに対応していると判定することができます。

iPhoneでnavigator.maxTouchPointsを参照
iPhoneでnavigator.maxTouchPointsを参照

もしタッチ操作に対応していないPCなどのブラウザでそれぞれのプロパティを参照すると、次のようにontouchstartプロパティundefinedmaxTouchPointsプロパティ0と表示されます。

PCのChromeでwindow.ontouchstartを参照
PCのChromeでwindow.ontouchstartを参照
PCのChromeでnavigator.maxTouchPointsを参照
PCのChromeでnavigator.maxTouchPointsを参照

以上の2つの値を次のコードのように取得して判定することで、端末がタッチに対応しているかどうか調べます。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JS Test</title>
	<script>
  // 端末がタッチ(タップ)に対応しているか確認する
  var touch_event = window.ontouchstart;
  var touch_points = navigator.maxTouchPoints;
  
  if( touch_event !== undefined && 0 < touch_points ) {

    // タッチ対応端末の処理が入る
    alert("タッチ対応端末です");

  } else {

    // タッチ非対応端末の処理が入る
    alert("タッチ非対応です");
  }
	</script>
</head>
<body>
<h1>JS Test</h1>
</body>
</html>

if文の条件式の中で次の2つを確認し、タッチに対応/非対応で処理を分けています。

  • touch_eventundefinedではないか
  • touch_points0より多いか(1以上か)
PCのChromeでアクセスしたときの表示例
PCのChromeでアクセスしたときの表示例

PCでもブラウザのエミュレーター機能を使ってiOSやAndroidにするとタッチ可能端末として判定されます。

エミュレーターでiOS/Androidにするとタッチ対応と判定
エミュレーターでiOS/Androidにするとタッチ対応と判定

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。