1 つは 1000 x 800 ピクセル (「大」) で、もう 1 つは 200 x 200 ピクセル (「小」) です。srcset / sizes / picturefillを使用して、画面の幅が 500 CSS ピクセル以下の場合は小さな画像を表示し、それ以外の場合は大きな画像を表示したいと考えています。
ここにストローマンの提案があります: http://jsfiddle.net/ghhjfo4z/1/embedded/result/
<img srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, http://i.imgur.com/BgLoqRx.jpg 500w">
これは、私の 1x ピクセル密度ディスプレイでは問題なく動作します。しかし、2x ピクセル密度の Retina ディスプレイに切り替えると、突然、ビューポートの幅が 250 CSS ピクセル以下の場合にのみ小さな画像が表示されます。
ビューポートが 500px 以下の場合に、2 倍のピクセル密度のディスプレイでブラウザーに小さな画像を使用させる方法はありますか?
基本的に、デバイスのピクセル密度を無視し、srcsetやサイズを使用して、ビューポートの CSS ピクセル幅に基づいて画像のみを選択したいと考えています。