操作

スマートフォンなどの小型画面デバイスには、タッチスクリーンが搭載されていることがよくあります。ノートパソコンやデスクトップ パソコンなどの大画面デバイスには、マウスやトラックパッドなどのハードウェアが付属していることがよくあります。小画面はタッチ、大画面はポインタと考えるのは簡単ですが、

しかし、現実はもっと複雑です。一部のノートパソコンにはタッチスクリーン機能が搭載されています。ユーザーは、タッチスクリーン、トラックパッド、またはその両方を操作できます。同様に、タブレットなどのタッチスクリーン デバイスで外部キーボードやマウスを使用することもできます。

画面サイズから入力メカニズムを推測するのではなく、CSS でメディア機能を使用します。

ポインタ

pointer メディア機能では、none、coarse、fine の 3 つの可能な値をテストできます。

ブラウザが pointer の値として none を報告した場合、ユーザーはキーボードを使用してウェブサイトを操作している可能性があります。

ブラウザが pointer 値として coarse を報告した場合、プライマリ入力メカニズムの精度が低いことを意味します。タッチスクリーンの指は粗いポインタです。

ブラウザが pointer 値として fine を報告する場合、それはプライマリ入力メカニズムが細かい制御に対応していることを意味します。マウスやタッチペンは、ポインタとして使用できます。

インターフェース要素のサイズは、pointer の値に合わせて調整できます。このデモウェブサイトにさまざまな種類のデバイスでアクセスして、インターフェースがどのように適応するかを確認してください。

この例では、粗いポインタ用にボタンが大きくされています。

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

要素を小さくしてポインタを細くすることもできますが、次の点に注意してください。

すべきでないこと
@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

きめ細かい制御が可能なプライマリ入力メカニズムを備えている場合でも、インタラクティブ要素のサイズを縮小する前に、よく検討してください。フィッツの法則は引き続き適用されます。ターゲットが小さいと、ポインタが細くても集中力が必要になります。ターゲット領域を大きくすると、ポインティング デバイスに関係なく、すべてのユーザーにとってメリットがあります。

任意のポインタ

メディア機能 pointer は、プライマリ入力メカニズムの精度をレポートします。しかし、多くのデバイスには複数の入力メカニズムがあります。タッチスクリーンとマウスの両方を使用してウェブサイトを操作しているユーザーがいる可能性があります。

any-pointer は、ポインティング デバイスがテストに合格したかどうかをレポートするという点で、pointer メディア機能とは異なります。

none の any-pointer 値は、ポインティング デバイスが使用できないことを意味します。

any-pointer の値が coarse の場合、少なくとも 1 つのポインティング デバイスの精度が低いことを意味します。ただし、それが主な入力メカニズムではない可能性があります。

any-pointer の値が fine の場合、少なくとも 1 つのポインティング デバイスが細かい制御に対応していることを意味します。ただし、これは主な入力メカニズムではない可能性があります。

any-pointer メディアクエリは、入力メカニズムのいずれかがテストに合格した場合に肯定的な結果を報告するため、ブラウザが any-pointer: fine の結果を報告すると同時に any-pointer: coarse の結果を報告する可能性があります。その場合、メディアクエリの順序が重要になります。最後のものが優先されます。

この例では、デバイスにファイン入力メカニズムとコース入力メカニズムの両方がある場合、コース スタイルが適用されます。

@media (any-pointer: fine) {
  button {