6

ハンドヘルドデバイス（携帯電話など）か、ラップトップ、固定PC、タブレットなどの大画面デバイスかによって、ページのスタイルを変更する必要があります。

css max-widthクエリなどで解決策を検出できることは知っていますが、それは説得力がありません。今日のスマートフォンはそのような高解像度の画面を持っていることが主な理由です。IEのSonyXperiaSは、720p x 1280の画面を備えていますが、わずか4,3 "です。これにより、通常のコンピューター画面では読み取れる10pxフォントは、小さすぎて読み取れなくなります。

したがって、それが小画面デバイスであるかどうかを知るには、解像度だけでなく、もう少し知る必要があります。（そして、media = "handheld" cssスタイルが進むべき道だと思います。間違っている場合は訂正してください）。

つまり、cssメディアタイプ「ハンドヘルド」はどのパラメータを気にしますか？

  • デバイスの画面サイズ？
  • ブラウザのウィンドウサイズ？
  • 帯域幅？
  • デバイスが「ハンドヘルド」であるかどうか、またはクライアントから渡されたパラメータだけではないかどうかの情報ですか？
  • タブレットは「ハンドヘルド」デバイスとして含まれていますか？

等

ありがとうございました！

4

1 に答える 1

9

handheldメディアタイプはほとんど役に立たない。なぜなら、現世代のスマートフォンや同様のデバイス（少なくともAndroidとiOSのストックブラウザ）は、古いデバイス用に設計された超最小限のフォーマットが与えられるのを避けるためにメディアタイプを使用しないからだ。

メディアクエリを使用することをお勧めします。サイズだけでなく解像度も照会でき、ピクセルだけでなく物理単位（in、pt、cm）でもサイズを照会できることに注意してください。（ただし、デバイスが適度に正確な物理ユニットサイズを報告するかどうかはわかりません。）

ただし、実用的な場合は常に、特定のデバイス用に設計するのではなく、サイトがあらゆる規模で適切に機能するようにする必要があります（このための現在の流行語はレスポンシブ設計であり、このための手法について多くのことが書かれています）。私の個人的なアプローチは、スタイルシートをほぼ完全にem（行の高さの単位）で記述し、特定のレイアウトが特定のサイズ範囲でのみ適切に機能する場合に、メディアクエリを使用してレイアウトを切り替えることです。サイズはで定義されるためem、メディアクエリemも同様に記述する必要があります。これの利点は、フォントサイズが、画面上のアイテムの適切な表示サイズの適切なプロキシであるということです。これは、表示距離と（ユーザーがブラウザーの構成に時間をかけた場合）ユーザーの目/手の能力を反映します。

于 2012-06-03T19:05:41.653 に答える