自分は自分のサイトのデザインを1ヶ月に1回はコロコロと変える派なのですが、その都度思っている事がありました。それは「レスポンシブデザインはデバイス幅を基準にCSSを切り替えるのが正しいのか」という事です。

よくあるCSSですと、

div {
  font-size: 1rem
}

@media (min-width: 640px) {
  /*
    画面幅がある程度広いデバイスで見たら文字サイズが1.5rem
  */
  div {
    font-size: 1.5rem
  }
}

このような感じでデバイスの横幅を基準に、スマホで見た場合と、PCで見た場合の画面のデザインを切り替えています。しかし、自分のサイトを iPad 等で見た時にPC版のデザインが表示される事に違和感を抱いていました。マウス操作とタッチパネル操作の差など、PCとは全然勝手が違うのにデバイス幅だけでPCのデザインを出して欲しくなかったのです。しかし世の流れがそうでしたので、違和感を感じつつも実装をしていました。

メディアクエリ pointer の存在を知る

そんな時にメディアクエリ pointer を知りました。デバイスがどのようなポインティングデバイスを持っているかに基づきデザインを調整できるものです。

仕様としては下記の通りです。

• none
  • 主要な入力方法に、ポインティングデバイスがありません。
• coarse
  • 主要な入力方法に、ポインティングデバイスがありますが、その正確性が限定されています。例としてタッチスクリーンやモーション検出センサーがあります。
• fine
  • 主要な入力方法に、ポインティングデバイスがあり、正確性も高いです。例としてマウス、タッチパッド、タッチペンなどがあります。

まさにこれこそ探していたものです。IEには対応していません が Edge には対応しているので、個人サイトとしては十分です。

使い方としては、下記の通り既存のものと変わりません。

div {
  font-size: 2rem
}

@media (pointer: fine) {
  /*
    マウスなどの繊細なポインティングデバイスを持っているデバイスで見たら文字サイズが1rem
  */
  div {
    font-size: 1rem
  }
}

ですが、分岐条件が横幅ではなくユーザの入力方法ですので、また違う考えが必要になります。

JavaScript で使用する際は、

const isPointerFine = window.matchMedia('(pointer: fine)').matches // boolean

等で使用できます。

PCで見ている人は、よかったらこのサイトを見ながらブラウザの幅を変えてみてください。横幅は可変ではあるもののスマホ版のデザインには切り替わらないはずです。逆に開発者ツール等でモバイルシュミレーションをONにすると、横幅がどうであれスマホ版のデザインに切り替わります。

おわりに

いまこのサイトもメディアクエリ（pointer）にてデザインを切り替えていますが、概ね満足です。メディアクエリ（min-width）とのあわせ技で、スマートフォンで見た場合のボタンサイズと、タブレットで見た場合のボタンサイズを調整しようかなーとも思っていますが、デザイン切り替えの Key は今後も pointer で行こうと思っています。

自分と同じ様な違和感を持っている人はメディアクエリ（pointer）を使用してみませんか。