https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/are-you-using-a-device-that-can-be-touched-with-javascript/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/are-you-using-a-device-that-can-be-touched-with-javascript/

JavaScriptでタッチ操作ができるデバイスを使っているか判別するのに便利なwindow.ontouchstart・navigator.maxTouchPointsプロパティの使い方

タッチ操作ができるデバイスを使っているか判別する

昨今はタッチ可能なデバイスとしては、一般的にIOSやAndroidが挙げられますが、他にもMictosoftのSurfaceの様にWindowsでタッチ操作可能なデバイスがありますので、OS情報を元に判断することはできなくなりました。

そこで、現在でがタッチ操作ができる環境かどうかを判別するには2つのプロパティを駆使する必要があります。

プロパティ

プロパティ意味返り値
window.ontouchstartタッチ開始時のイベント関数
navigator.maxTouchPointsポインターの最大数数値
タッチ操作系のイベント

サンプルコード

現在お使いのデバイスがタッチ操作可能かどうかを調べ、結果を返すスクリプトを紹介します。

このサンプルコードでは下記のことを行っています。

  1. まず'ontouchstart' in window でwindowオブジェクトにタッチ判別に使うイベントハンドラontouchstartが登録されているかを確認して、iOSかAndroidか判定
  2. そうでなかったら、タッチ可能なWindowsデバイスかを判定
  3. それでもなかったら、タッチ不可能なデバイスかMacかを判定
Output
Pug
div#targetText
JavaScript
const targetText = document.getElementById('targetText');

//IEは11しか機能しません
if ( 'ontouchstart' in window ) {
	targetText.textContent = `お使いのデバイスはiOSまたはAndroid系です。`;
} else if ( navigator.maxTouchPoints > 0 ) {
	targetText.textContent = `お使いのデバイスはtouch操作が可能なWindowsパソコンです。`;
} else if ( navigator.maxTouchPoints == 0 ) {
	targetText.textContent = `お使いのデバイスはtouch操作が不可能なWindowsパソコンかMacです。`;
}
インストラクター
コメント

コメントを残す