タッチに対応しているか判定する
イベントハンドラのontouchstartプロパティはブラウザを表示している端末がタッチに対応しているときは存在し、対応していない場合は存在しない状態になります。
そこで、このプロパティが「undefined」かどうかを調べることがまず1つのヒントとなります。
加えて、同時に対応できるタッチの数をnavigatorオブジェクトのmaxTouchPointsプロパティから参照することで、より確実にタッチに対応しているかを調べることができます。
このタッチの数は1以上であればタッチに対応していると判定することができます。
もしタッチ操作に対応していないPCなどのブラウザでそれぞれのプロパティを参照すると、次のようにontouchstartプロパティはundefined、maxTouchPointsプロパティは0と表示されます。
以上の2つの値を次のコードのように取得して判定することで、端末がタッチに対応しているかどうか調べます。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS Test</title>
<script>
// 端末がタッチ（タップ）に対応しているか確認する
let touch_event = window.ontouchstart;
let 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_eventはundefinedではないか
- touch_pointsは0より多いか（1以上か）
PCでもブラウザのエミュレーター機能を使ってiOSやAndroidにするとタッチ可能端末として判定されます。
