srcset 不适用于 iPhone

Question

我在我的项目中使用 srcset，一切顺利，直到我在 iPhone 上进行测试，然后 srcset 突然不起作用，这里是我的代码：

 <picture class="banner-hero__picture-container">
   <source srcset="../../../../../xxx/01-480.jpg" media="(max-width: 479px)">
   <source srcset="../../../../../xxx/01-768.jpg" media="(max-width: 767px)">
   <source srcset="../../../../../xxx/01-1200.jpg" media="(max-width: 1199px)">
   <img src="../../../../../xxx/01-1920.jpg" class="banner-hero__image">
 </picture>

我知道关于像素密度有一些规则，但是在 iPhone 纵向（320px，平均视网膜 640px）上加载的图像是 1920px，甚至不是 768px。

（在 iPhone 5 上测试）

Answer 1

WebKit 尚不支持

picture。使用图片填充。

http://caniuse.com/#feat=picture http://scottjehl.github.io/picturefill/

srcset 不适用于 iPhone

srcset doesn't work on iPhone

iphone

resolution

srcset