ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してタッチスクリーン デバイスを確実に検出するにはどうすればよいですか?

JavaScript を使用してタッチスクリーン デバイスを確実に検出するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-12-10 00:28:10
オリジナル
643 人が閲覧しました

How Can I Reliably Detect Touchscreen Devices Using JavaScript?

JavaScript を使用したタッチ スクリーン デバイスの検出: 最適化されたアプローチ

クロスプラットフォームの互換性を確保するために、開発者は多くの場合、タッチ スクリーン デバイスとタッチ スクリーン デバイスを区別するという課題に直面します。 JavaScript を使用する、対応デバイスと非タッチ デバイス。これは、デバイスの入力方法に基づいてユーザー エクスペリエンスをカスタマイズする場合に非常に重要です。

当初、JavaScript は Modernizr の「touchevents」テストに依存してタッチ スクリーンの機能を確認できることが示唆されていました。ただし、Modernizr からテストが削除されたため、このアプローチは適用できなくなりました。

更新された検出方法

2021 年現在、タッチを検出する信頼性の高い包括的な方法-有効なブラウザでは、次のことを確認します。プロパティ:

function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}
ログイン後にコピー
  • ウィンドウ内の 'ontouchstart' は、ほとんどのタッチ対応ブラウザでサポートされている touchstart イベント リスナーの存在を確認します。
  • navigator.maxTouchPoints > 0 は、ブラウザがマルチタッチ ジェスチャをサポートしているかどうかを確認します。
  • navigator.msMaxTouchPoints > 0 は、Microsoft の Edge ブラウザで同じ機能をチェックします。

高度なケースの詳細

より複雑なタッチ検出シナリオについては、次のリソースを検討してください。

  • [タッチスクリーンを検出できません by Stu Cox](https://www.stuartelliscox.com/blog/you-cant-detect-a-touchscreen/)
  • [タッチの検出: それは「方法」ではなく「理由」です by レミー・シャープ](https://remysharp.com/2013/04/01/detecting-touch/)
  • [敏感になるパトリック・H・ラウクによるプレゼンテーション](https://www.patrickhlauke.com/getting-touchy-with-javascript)

以上がJavaScript を使用してタッチスクリーン デバイスを確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート