𝗧𝗵𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗧𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 𝗠𝘆 𝗗𝗲𝘀𝗶𝗴𝗻 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵
以前の私は、画面サイズを確認してウェブサイトをデザインしていました。
ユーザーがスマートフォンを使っているのか、それともタブレットを使っているのかを判別する必要があると考えていました。画面の高さが幅よりも大きいかどうかを確認しようとしたこともありましたが、それは向き（orientation）をチェックしているだけで、デバイスの種類を判別しているわけではありませんでした。
もっと良い方法を見つけました。メディアクエリを使って、ユーザーがサイトとどのように「対話（インタラクション）」しているかを確認するのです。
(hover) クエリは、デバイスが要素の上にホバーできるかどうかをチェックします。
マウスやトラックパッドを備えたデバイスには @media (hover: hover) を使用します。
スマートフォンのようなタッチ専用デバイスには @media (hover: none) を使用します。
これにより、モバイルでのホバーに関する問題を解決できます。スマートフォンでは、ホバーのルールが機能しなかったり、挙動が不安定になったりすることがよくあります。例えば、「モバイルではボタンを表示し、デスクトップではユーザーがホバーするまで隠しておく」といったコードを書くことができます。
Tailwindを使えば、arbitrary variants を使って簡単に実装できます。
また、(pointer) を使ってポインターの精度を確認することもできます。
• マウス: hover あり、fine pointer • トラックパッド: hover あり、fine pointer • 指でのタッチ: hover なし、coarse pointer • スタイラス: 通常は hover あり、fine pointer
メインの入力デバイスだけでなく、すべての入力デバイスを確認したい場合は、以下を使用します。
• @media (any-hover: hover) • @media (any-pointer: fine)
マウスを接続したタブレットの場合、プライマリ入力としては hover: none と報告されるかもしれません。しかし、マウスが存在するため any-hover: hover と報告されます。
画面サイズのためだけにデザインするのはやめましょう。ユーザーがインターフェースをどのようにタッチしたりクリックしたりするか、その「方法」に合わせてデザインし始めてください。