7

次のマークアップを持つページに取り組んでいます。

<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
       /banner_home.600x400.jpg 480w,
       /banner_home.728x242.jpg 768w,
       /banner_home.920x306.jpg 960w,
       /banner_home.1234x400.jpg 1280w">

最新のChromeとOperaでは、画面サイズが何であれ無視され、最後にリストされているファイルが出力されるようです(私の場合は1234x400.jpg)。

Picturefill を使用すると、Firefox と Safari の両方が小さな画面で正しい画像を表示します。

今日のテスト中に、しばらく開いていなかった Opera を起動しました。最初に起動したときは v25 で、小さい画面サイズでも正しい画像が表示されました。

その後、アップデートがダウンロードされたことに気づいたので、それを実行して v27 にアップデートすると、Opera は最新の Chrome と同じ問題を表示していました。

ということで、最近Blinkで何かが変わったようです。

他の誰かがこれを確認できますか、それとも私が間違っているだけですか?

私が何を意味するかを説明するためのCodepen。

4

2 に答える 2

14

あなたはそれを間違ってテストしています:D

Chrome 40 に加えられた変更は、高密度リソースがキャッシュで利用可能な場合 (たとえば、例で可能な最大の画像)、別のものを再ダウンロードしても意味がないため、これが選択されるリソースであることを意味します。低解像度のもの。

どのリソースがより小さなデバイスにダウンロードされるかを本当にテストしたい場合 (どのリソースが選択されるかに依存する必要srcsetはありません)、実際のデバイスでテストするか、シークレット セッションを開いてサイズを変更することができます。ブラウザ (またはデバイスをエミュレート) を実行してから、テスト ページをロードします。

また、どの画像が読み込まれたかを確認できるように、少し明確なテスト ケースを作成しました。

また、あなたの例から、srcset内で異なる比率の画像を使用しているように見えます. これは使用すべきものsrcsetではなく<picture>、どのリソースがロードされるかを保証する を使用することで、間違った画像がロードされたためにレイアウトが崩れることがありません。

あなたが使用しているときsrcset、「間違った」イメージはありません。ブラウザーは、適切と思われるものを自由に選択できます (キャッシュ内にある、接続性が低い、ユーザー設定がそう言っているなど)。

于 2015-02-06T14:55:38.130 に答える