Search code examples
iphoneresolutionsrcset

srcset doesn't work on iPhone

I'm using srcset on my project, everything goes well till I test on iPhone, then srcset sudenly don't work, here my code:

 <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>

I know there are sone rules about pixel density, but on iPhone in portait (320px, avec retina 640px) the image loaded is the 1920px, not even the 768px.

(tested on iPhone 5)

Solution

  • picture is not supported yet in WebKit. Use picturefill.

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