css - CSS メディア クエリの定義

Question

次のメディア クエリは、モバイル デバイスとコンピューターでまったく同じように動作しますか、それとも何か違いがありますか?

@media only screen and (max-width: 480px), 
screen and (max-device-width: 480px){
...
}

と

@media (max-width: 480px) {
..
}

Answer 1

いいえ彼らはしません。これは、device-widthがと同じではないためですwidth。メディアクエリにwidth同じように動作する場合でも、導入device-widthすると異なる結果が得られます。詳細については、この質問に対する私の回答を参照してください：iPhoneiPadを対象とするCSSスタイルシートが機能しない

Answer 2

メディアクエリ自体も同じように動作します。しかし、彼らが異なることを質問するとき、彼らは異なる答えを得る可能性があります。

「画面のみ」は通常は機能しますが、少数のモバイルデバイスは「画面」ではなく「ハンドヘルド」として分類されます。（私の個人的な傾向は「すべてのみ」の方が優れています。これは、ハンドヘルドが含まれていることと、印刷とプレゼンテーションに同じCSSを提供していること（つまり、プロジェクター）があるためです。）

最初の概算では、min / max-widthは論理的な現在のウィンドウ（ユーザーが設定した可能性があります）であり、min/max-device-widthは物理的な画面です。ただし、多くのモバイルデバイスは、画面サイズの販売仕様で読み取った内容を返しません。それらの多くには、「ビューポート」の概念が含まれています...（<meta name = "viewport" content = "...で）変更できるものですが、通常、デフォルトでは実際の画面サイズよりもはるかに大きいものになります。 「ビューポート」を理解することで、クエリが明確になります（場合によっては回答も得られます）。

また、モバイルデバイスははるかに近い距離で表示されることが多いため、同等のユーザーエクスペリエンスを提供するには、はるかに高密度のピクセルが必要です。（iPadの「網膜」ディスプレイはトレンドを例示しています。）非常に高いピクセル密度の結果として、小さな物理的寸法はとにかく特に大きなピクセル寸法を持つことができます。（私自身の傾向は、本当に賢明な結果を生み出すために、最終的にメディアクエリで密度を考慮に入れる必要があると考えることです。）


いずれにせよ、概念を維持しながら、それをかなり異なる方法で実装するメディアクエリの代替手段として、http://www.ckollars.org/alternative-to-media-queries.htmlをご覧ください。