Interaction media queries | Frontend Practical Guide

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.at-rules.media.any-hover`	41	16	64	9	41	9
CSS @ ルール
`any-pointer` any-pointer は CSS のメディア特性で、ユーザーが (マウスなどの) 何らかのポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。	41	12	64	9	41	9
`hover` hover は CSS のメディア特性で、第一の入力機構で要素の上でホバーする（かざす）ことができるかどうかを検査するために使用することができます。	38	12	64	9	50	9
`pointer` pointer は CSS のメディア特性で、ユーザーが（マウスなどの）ポインティングデバイスを持っているか、もしそうならば、第一のポインティングデバイスにどれだけの正確性があるかを調べます。	41	12	64	9	50	9

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

@media (hover: none) {
  .tooltip { display: none; }
}
@media (pointer: coarse) {
  button { min-height: 44px; }
}

CSS Hover support demo.

CSS Pointer: coarse support demo.

CSS Pointer: fine support demo.

タッチデバイス向けUIの最適化

pointer: coarseのデバイスでタップターゲットを拡大し、hover: noneの場合はホバーに依存しないインタラクションに切り替えます。