Web サイトをさまざまなモバイル デバイスで動作させることに取り組んでいますが、デバイス幅に関するいくつかの問題に遭遇しました。このような質問が以前に聞かれたことは知っていますが、ここと他の場所の両方で相反するものを読みましたが、探しているものを明確にするものは何も見つかりませんでした.
解像度が 480x800 の Nexus One を使用しているとします。次に、次のようなメタ タグを作成します。
<meta name="viewport" content="width=device-width">
縦向きの場合、ビューポートの幅は 320px で、横向きの場合、ビューポートの幅は 533px です。論理解像度が 320x533 であるため、これは理にかなっています。しかし、次のようなメディアクエリを作成すると:
@media only screen and (max-device-width: 320px) {
/*CSS rules here */
}
デバイス幅は物理的な解像度を指し、向きによって変化しません。したがって、Nexus One の場合、デバイスの幅は向きに関係なく 480 ピクセルであるため、メディア クエリには含まれません。
これは正常な動作ですか？そうである場合、デバイス幅の動作が 2 つの間で非常に異なるのはなぜですか? それらは異なる値を使用しているだけでなく、方向に基づいて変化するものと変化しないものがあります。これは非常に紛らわしく、さらに悪いことに、Web 上の他の場所で、正反対 (メディア クエリの device-width は向きの影響を受け、メタ タグの device-width は影響を受けない) を読みました。
明確にする助けがあれば大歓迎です。