JavaScript のトリック: タッチ スクリーン デバイスを効率的に検出するにはどうすればよいですか?

Question

デスクトップおよびモバイルデバイス用の jQuery プラグインを作成しました。 JavaScript を使用してデバイスにタッチスクリーン機能があるかどうかを検出する方法があるかどうか疑問に思っています。 jquery-mobile.js を使用してタッチ スクリーン イベントを検出しており、iOS、Android などで動作しますが、ユーザーのデバイスにタッチ スクリーンがあるかどうかに基づいた条件ステートメントも書きたいと考えています。

これは可能ですか?

Answer 1

2021 年最新情報

古い回答を確認するには: 履歴を確認してください。投稿に履歴を残すと管理できなくなってきたので、最初から始めることにしました。

私の元の回答では、Modernizr が使用しているのと同じ関数を使用できると述べていましたが、この PR で「touchevents」テストが削除されたため、それは無効になりました: https://github.com/Modernizr/ Modernizr/pull/2432 これは紛らわしいトピックなので。

そうは言っても、これはブラウザに「タッチ機能」があるかどうかを検出する非常に良い方法であるはずです:

リーリー

ただし、より高度な使用例については、私よりもはるかに賢明な人々がこのトピックについて書いているので、これらを読むことをお勧めします:

• ステュ コックス: タッチ スクリーンを検出できません
• タッチの検出: 「方法」ではなく「理由」に焦点を当てます
• パトリック・H・ロークのタッチ紹介

Answer 2

更新: 機能検出ライブラリ全体をプロジェクトに組み込む前に、以下の blmstr の回答 をお読みください。実際のタッチ サポートの検出はより複雑で、Modernizr は基本的な使用例のみをカバーします。

Modernizr は、Web サイト上のさまざまな機能を検出するための軽量な方法です。

各属性の HTML 要素にクラスを追加するだけです。

これにより、CSS と JS でこれらの機能を簡単にターゲットにすることができます。例えば：＃＃＃ リーリー

および JavaScript (jQuery の例):

リーリー