問題タブ [pixel-ratio]

Retina 対応にするために、メディアクエリを使用していくつかの Web サイトを開発しました。Firefox では、すべての背景画像 (メディアクエリによって管理される) がぼやけていて、網膜に対応していないことがわかります。

これは正常ですか？Firefox が pixel-ration のメディアクエリをまだサポートしていないのはなぜですか?

元：

ご協力いただきありがとうございます。

レスポンシブ画像について混乱しています。モバイル デバイスで表示したときにデバイス ピクセル比が画像に与える影響。

デバイスのピクセル比が 1.5 の解像度 480x854 のモバイル デバイスを使用しています。つまり、幅 320px (480/1.5) の画像を送信すると、ビューポートを次のように指定した場合、ブラウザの幅に自動的に収まります。

幅 480px の画像を提供すると、ブラウザの実際の幅からはみ出してしまいます。しかし、これを指定すると、

320pxの画像より明らかに高画質でブラウザ幅100%で表示されます。

では、デバイスのピクセル比に基づいて画像を表示する実行可能な方法は何ですか? デバイスに 320px または 480px (100%) の画像を送信する必要がありますか?

Web サイトの各投稿には、ヘッダー画像があります。この画像の幅100vwと高さは300pxです。srcsetタグの属性imgまたは本格的な要素のいずれかを介して、この画像の複数のバージョンを配信したいと思いますpicture（現時点ではどちらかがわからないため、この質問です）。

これを行うには、srcset属性を使用するとかなり簡単です。

さまざまなデバイスのピクセル比を考慮したい場合に問題が発生します。まず、上記にリストされているすべてのイメージの2xとバージョンがあるとします。3xsrcset

幅の広いビューポート (iPhone 5 など)を備えた2x電話を持っているとしましょう。320pxブラウザをロードしたいと思いますxs_2x.jpg。同様に1x、ワイドスクリーン モニターを備えたデスクトップがあるとします。ブラウザをロードしたいと思いますlg.jpg。

しかし今、私がより大きな携帯電話を持っているとしましょ3xう414px。この場合、ブラウザをロードしたいと思いますsm_3x.jpg。ただし、(1536 ピクセル) の幅は(2304 ピクセル)の幅よりも電話の幅 (1242 ピクセル) に近いため、私のブラウザーはsm_2x.jpg代わりに読み込まれる可能性があります。これにより、デバイス上で画像の高さが低くなり、Web サイトの要件が満たされなくなります。sm_2x.jpgsm_3x.jpg300px

動的な幅、静的な高さ、DPR を意識したレスポンシブ イメージを実装するにはどうすればよいですか?

2 つの主要な要素を持つページのレスポンシブ レイアウトに取り組んでおり、そのうちの 1 つを標準の電話画面 (最大約 5 インチとしましょう) で非表示にする必要があります。サブ条件は、横向きモードで、画面幅が 800px までです。通常、スマートフォンはピクセル比 (> 1) や解像度 (> 130dpi) が高いため、一般的なモニターと簡単に区別できます。それでも、Chrome Dev Tools を使ってテストしたところ、pixel-ratio=1 で resolution=96dpi のモバイルがいくつか見つかりました。この仕様では、一般的なモニターとメディア クエリを区別できません。

前述のとおり、この Media Query は一般的なモニターにも影響します。ケースを分離するために使用できる他の仕様はありますか?

問題についていくつかのデバイスを投入するには：

• Motorola Droid 3/4/Razr/Atrix (540x960px; ピクセル比:1; 解像度 96dpi)

• Motorola Droid Razr HD (720x1280px; ピクセル比:1; 解像度 96dpi)

• Sony Xperia Sola (480x854px; ピクセル比:1; 解像度 96dpi)

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