メディア クエリの使用に関しては、max-width と max-device-width が「小さな画面」のデバイスやスマートフォンをターゲットにするために多く使用されていることがわかりましたが、解決のためにメディア クエリを使用しないのはなぜですか?
たとえば、@media screen and (min-resolution: 230dpi)480 x 800 ピクセル、4 インチ (~233 ppi ピクセル密度) の Galaxy S Glide SGH I927R など、一部のスマートフォンを対象とする CSS を作成できます。
逆に、@media screen and (max-device-width: 480px) and (orientation: portrait)plusを使用する必要があります@media screen and (max-device-width: 800px) and (orientation: landscape)。
最小解像度で時間を節約できるようです。私はいくつかの記事やブログを読みましたが、解決を提唱している人は見当たりません。
私が見逃している明らかな点があるに違いありません-私はプロのWebデザイナーではありません-しかし、解像度を使用するアプローチの何が「間違っている」のでしょうか? 「小さな画面」をターゲットにするのに幅またはデバイス幅が優れている理由は何ですか。
これまでの幅とデバイス幅に関する私のお気に入りのサイトは次のとおりです 。 http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
max-device-width 800px を使用しなければならなかった理由は、スマートフォンには「過剰」に思えたのですが、meta タグ ビューポートを使用しなかったためです。上記の記事の 3 ページ目に、次のように書かれています。
「これは、CSS メディア クエリが、実際のサイズではなく、「縮小された」デバイスのサイズに一致することを意味します (つまり、iPhone のデバイス幅は 320 ピクセルではなく 980 ピクセルです)。最初のステップは、ページに特定の META タグを定義して、モバイル ブラウザの「ズームイン」動作を変更/無効にすることです...」
おそらくビューポートを定義した後、メディア クエリで解像度を使用するよりも max-device-width の方が理にかなっているでしょうか?