问题
So i have this code:
<html>
<head>
</head>
<body>
<img src="small.jpg" srcset="https://media.kulturbanause.de/blog/2014/09/responsive-images/small.jpg 320w, https://media.kulturbanause.de/blog/2014/09/responsive-images/medium.jpg 600w, https://media.kulturbanause.de/blog/2014/09/responsive-images/large.jpg 900w" alt="">
</html>According to the code, there should be a diffrent image be loaded for diffrent viewport sizes. however when I run this code on my phone, it still shows the large.jpg even for 320w (viewport width) the small one should be loaded.
回答1:
According to the code, there should be a diffrent image be loaded for diffrent viewport sizes.
You've misunderstood how [srcset] works. [srcset] allows you to suggest a series of different sources for a device to use and give the device the option to pick an image that's likely to be optimal for the device.
The purpose is to save bandwidth, so devices typically download the largest image that would reasonably fit on their screens, although there are a lot of other nuances that come in to play that I'm not going to get into here.
What devices are not going to do is switch between the various images when a different breakpoint would apply. This is the job of the <picture> element.
来源：https://stackoverflow.com/questions/41594359/why-is-srcset-not-working