1

大型デバイスのユーザー向けにアニメーション GIF を表示するために使用srcsetしていますが、小規模および中規模デバイスのユーザーには静的 JPG を表示する必要があります。

次のコードは、1x 画面でブラウザー ウィンドウのサイズを変更するときにうまく機能します。私が直面している問題は、iPad でページをポートレート モード (768px) で表示すると、アニメーション GIF が表示されることです。ブラウザは 2 倍の解像度であるため、より高品質の画像を表示しようとしていることがわかりますが、私の場合は、まったく異なる画像である必要があります。

ユーザーの画面の幅が 940px を超える場合にのみ GIF を表示するように変更するにはどうすればよいですか?

<img src="static.jpg" sizes="(max-width: 940px)" srcset="static.jpg 940w, animated.gif 1400w" alt="">
4

1 に答える 1

3

これはまったく仕事ではありませんsrcset-srcset解像度を除いてすべてが完全に同一である複数のソースを処理します。異なる画像を提供する場合は<picture>、複数の<source>要素を使用してください。

たとえば、質問に正確に答えるには、次のようにします。

<picture>
  <source media="(min-width: 940px)" srcset="animated.gif">
  <img src="static.jpg">
</picture>

しかし、メタ的な疑問が残ります。なぜ gif を大画面デバイスにしか送信しないのですか? 大画面デバイスの方が帯域幅が広いなどと想像していますか?

于 2016-02-19T19:22:10.617 に答える