作成 October 16, 2023
※ 表示が正しくないと思う場合は、JavaScript を有効にしてください。
このページを読み込むとすぐに、タッチ不可デバイス（マウス操作、あるいはマウスもなし）か、 あるいはタッチ可能デバイスかを判断して、下に結果を表示します。
タッチ可能デバイスの場合は、同時タッチ（マルチタッチ）対応数を併せて表示します。
問題がなければ、ここに判定結果が表示されます。
出力例：
「5 点のマルチタッチ対応です。」
Android 13 の moto g53j 5G で、実行環境が Chrome か Firefox か Edge かによらず、この表示になりました。
デバイスのハードウェアスペックにより、マルチタッチ可能数が決まっているのでしょう。
Android 9 の Zenfone Max M2 でも同じように、この表示になりました。
「タッチ対応です（マルチタッチは非対応です）。」
マルチタッチには対応していないものの、タッチ操作は可能なデバイスでこの表示になる予定です。
この表示になるデバイスではまだ試せていませんが、PC に接続するタッチモニタでどうなるのか、気になっています。
ちなみに Google Search Console のライブテスト後のスクリーンショットでは、この表示になっていました。
「タッチ非対応です。」
Windows 10 のデスクトップ PC で、この表示になりました。
ブラウザは Edge でも Firefox でも Chrome でも同じでした（マウスは接続されています）。
スマホやタブレットで開く場合は、
https://www.straightapps.com/web/js-mouse-or-touch.html
)
投稿 October 16, 2023
ここから先は、上記、タッチ対応デバイスか、その場合は何点までマルチタッチに対応しているか、 あるいはタッチ対応デバイスではないかの判定を行っている JavaScript コードについての情報です。
まずは、HTML 部です。
単純に、結果を出力するための領域を用意しているだけです。
<p> このページを読み込むとすぐに、タッチ不可デバイス（マウス操作、あるいはマウスもなし）か、 あるいはタッチ可能デバイスかを判断して、下に結果を表示します。 </p> <p> タッチ可能デバイスの場合は、同時タッチ（マルチタッチ）対応数を併せて表示します。 </p> <p class="red sz140p" id="result"> 問題がなければ、ここに判定結果が表示されます。 </p> <script type="text/javascript" src="js/mouse-or-touch.js"></script>
最初の 2 つの <p> 〜 </p> は単に説明を表示しているだけです。
続く p タグの部分には id result と付けていて、結果表示領域としています。 このあと JavaScript が実行されて、結果文字列に書き換えられます。
赤文字で少し大きくするための css が別途定義されており class で読み込んでいますが、今は気にしなくてもいいでしょう。
最後の script で、js/mouse-or-touch.js を読み込んでいます。 実行時に、結果を出力するための id、result を参照していますので、その定義よりあとに記述されている必要があります。
以降のセクションで、それぞれ詳細を確認していきます。
なお、ご参考までに、JavaScript ソースコードそのものを、拡張子 js を拡張子 txt に変えて、次のリンクより開けるようにしてあります。
mouse-or-touch.txt
※ 作成時はタブを 4 文字としていますので、環境によってはタブが 8 文字のため、コメント等がずれて見えるかも知れません。
※ 念のため書き添えますが、このソースコードをこのまま転載・公開することはご遠慮ください。
なお、本サイトのご利用に際しては、必ずプライバシーポリシー（免責事項等）をご参照ください。
投稿 October 16, 2023
コーディングは Windows 10、デスクトップ PC で行っていますので、まずはコードを作成します。 マウスは接続されていますが、タッチ機能には対応していません。
早速、ページ読み込み時に実行される JavaScript コードを追っていきます。
// マルチタッチ対応かでタッチ性能を確認します。 var navi = window.navigator; var el = document.getElementById('result'); if (navi.maxTouchPoints > 1) { el.innerHTML = navi.maxTouchPoints + ' 点のマルチタッチ対応です。'; } else if (navi.maxTouchPoints > 0) { el.innerHTML = 'タッチ対応です（マルチタッチは非対応です）。'; } else{ el.innerHTML = 'タッチ非対応です。'; }
変数 navi に、window.navigator を設定しています。 このあと何回か navigator を使用しますので、短い名前にしている、という意味です。
同じように、このあと何回か使用しますので、result の id を付けた HTML エレメントを el に取得しています。
準備はこれだけです。
判定方法は、デバイスがマルチタッチに対応しているのかを保持する変数 navigator.maxTouchPoints の値を調べる、です。
最初の if 文、この値が 2 以上であれば 2 点以上のタッチを同時に判定できる「マルチタッチ」に対応していると言えます。 ここでは結果として画面に表示していますが、それにより処理をわける場合は、なんらかの変数に「マルチタッチに対応している」ことを記録すればあとで参照できます。
そうでない場合、マルチタッチには対応していません。 ただ、タッチ対応であれば 0 より大きい値が設定されている、すなわち 1 しか該当しませんので、 マルチタッチ非対応ですが、タッチには対応しているデバイスということになります。
これに該当するものがどのようなものかは、今はわかりませんが、 PC に接続するタッチモニタを接続したらこの値が返されるのか、 後日試してここに追記する予定です。
そして最後の else です。
どちらにもあてはまらなかった、ということは、タッチ非対応ということになります。
それぞれの場合において、 result という id が付いた部分の HTML を書き換えて、結果を出力しています。
デスクトップの Windows 10 (64 ビット）で試すと、Edge、Firefox、Chome といったブラウザによらず、 「タッチ非対応です。」 と表示されました。
これで無事に動作している、とは言えません。
もしかしたら、maxTouchPoints に値が設定されないために、常に 0 が入っているように見える可能性もあります。
タッチ対応デバイスでの結果を見て、検証する必要があります。
投稿 October 16, 2023
まずは Android 13 スマホ、 moto g53j 5G で動作確認を行います。
動作させる前にスペックを見ておくと・・・認識可能なタッチ数なんて書いていませんね。 「3 本指タッチでスクリーンショット」の機能がありますから、少なくとも 3 以上の値が返されるはずです。
実行してみると、 「5 点のマルチタッチ対応です。」 となりましたので、動作としては良さそうです。 本当にデバイスの性能として 5 点なのかどうかは検証できませんが。
maxTouchPoints に値が設定されている、ということはわかりました。
投稿 October 16, 2023
手元にある Android 8 から Android 9 にアップデートした ASUS の Zenfone Max M2 でも試してみます。
同じように実行してみると、 「5 点のマルチタッチ対応です。」 となりましたので、動作としては良さそうです。 こちらも本当にデバイスの性能として 5 点なのかどうかは検証できません。
日本では 2019 年発売の Android 8 機ですから、これで正しく判定できているようであれば問題ないでしょう。
正しく判定できないデバイスがあるかどうか、 たくさん検証できるほどのデバイスがありませんので、お気づきの点があれば、 アプリ開発ブログへのコメントにて、お教えいただけると嬉しいです。
本サイトの新着情報を紹介しています。
Windows 開発関連の情報を、書いています。
ウェブ開発に関するトピックは、「ウェブ開発トップ」にまとめられています。