web-dev-qa-db-ja.com

ブラウザで実際のタッチサポートを確認するにはどうすればよいですか？

今日（またはごく最近）Chromeベータ版が17に更新され、Webアプリにファンキーさがあったことに気づきました。通常はbody要素にクラスが追加されていたためだと気づきました。私がこのようにチェックするタッチイベントサポートがある場合にのみそこに置かれます：

  try {  
    document.createEvent("TouchEvent");
    _device.touch = true;
  } catch (e) {
    _device.touch = false;
  }

そして確かに、私はChrome 17.でタッチイベントを作成してトリガーすることができます。最初のアイデアは、タッチをチェックして、マウスクリックが失敗するかどうかを確認できるということでした。したがって、マウスですが、MouseEventsもトリガーします。

他に、ユーザーエージェントをスニッフィングせずに、タッチイベントをサポートするブラウザだけでなく、実際のタッチ可能なデバイスであることを確認するにはどうすればよいですか。

javascriptjqueryioseventstouch
20
Oscar Godson

試してください：

'ontouchstart' in document.documentElement
30
Ry-

ブラウザが「タッチをサポートしている」という理由だけで動作を変更したくないというわけではありません。例えば。 Chromeは、必ずしもタッチスクリーンが接続されているとは限りませんが、常にタッチをサポートするようになりました。タッチスクリーンが接続されていても、ユーザーは必ずしもそれを使用する必要はありません。したがって、変更内容に注意する必要があります。

だから、これは本当にあなたが知りたい理由に帰着します：

  1. Touchstart/touchmove/touchendイベントを取得するかどうかを知りたい：これを事前に確実に知る方法は実際にはありません。例えば。ページが読み込まれた後、ユーザーはタッチスクリーンを接続できます。これらのイベントに興味がある場合は、ただ耳を傾ける必要があります。

  2. サイトの「モバイル」バージョンを表示する必要があるかどうかを知りたいユーザーがタッチサポートを持っているかどうかは、これに対する正しいシグナルではありません。タッチスクリーンを使用しているWindowsユーザーは、おそらくモバイルサイトを望んでいません。 UserAgent heursticsを使用できますが、サイトのバージョンを切り替えるための粘着性のある方法をユーザーに提供してください。

  3. UIを微調整してタッチ入力をより使いやすくする必要があるかどうかを知りたい場合。たとえば、ユーザーがタッチを使用する可能性が高い場合は、一部のボタンを大きくする必要があります。一般に、常に複数のポインタータイプ用に設計するのが最善の場合があります。結局のところ、ユーザーがタッチとマウスの両方を使用している場合、ユーザーのポインター設定を知る方法はありません。しかし、UIのトレードオフを最適化するためのヒントとして、利用可能なポインターハードウェアの知識を本当に使用したい場合は、使用できる新しいCSSメディアクエリがあります。

ChromeこれらのChrome 21（crbug.com/123062）に部分的なサポートを追加しました。私が知る限り、他のブラウザはまだそれらをサポートしていません。

9
Rick Byers
('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch
8
lafeber