javascript や cssで、デバイスがマウスか？タッチパネルか？を判断する

最近のデバイスを調べていたら、UA でデバイスを振り分けるのはもう限界だと分かった。チョット調べてみると、現在では便利な振り分け方法がある事が分かった。

という事で、簡単な覚書を残しておく。

スタイルシートの場合

以下で、body の色が黄色かグレーに変化する
ページ遷移と同時に発生。

• <style type="text/css"><!--
  /* マウスなどの精密なポインタの場合 */
  @media (pointer: fine) {body{ background-color: yellow; }}
  /* タッチパネルなどの大雑把なポインタの場合 */
  @media (pointer: coarse) {body{ background-color: #ccc; }}
  --></style>

javascript の場合1

以下で、コンソールに結果が表示される。
ページ遷移と同時に発生。

• <script>
  if (navigator.maxTouchPoints > 0) {
  console.log('タッチパネルのデバイス検出');
  }
  else {
  console.log('マウスのデバイス検出');
  };
  </script>

javascript の場合2

以下で、コンソールに結果が表示される。
マウスクリックや、デバイスタッチのタイミングでイベント発生。

• <script>
  document.addEventListener('pointerdown', (event) => {
  if (event.pointerType === 'mouse') {
  console.log('マウス操作を検出');
  } else if (event.pointerType === 'touch') {
  console.log('タッチパネル操作を検出');
  } else if (event.pointerType === 'pen') {
  console.log('ペン操作を検出');
  }
  });
  </script>

「javascript の場合1」の方法が、色々と応用が出来て便利だねえ。
リスト表示された大量のリンクの隙間を調節するには、「スタイルシートの場合」がお手軽だねえ。

そして以下は、qiita の @momotaro_kawaii さん記述のもの（勝手に転載）

• const userAgent = navigator.userAgent.toLowerCase()
  if (/ipad|macintosh/.test(userAgent) && ('ontouchend' in document)) {
  console.log('iPadです。')
  } else {
  console.log('PCです。')
  }
• 【JavaScript】User-AgentでPCとiPadの判別方法 #JavaScript - Qiita

なるほど、「('ontouchend' in document)」なんてものもあるのか。
このページは以上。