Q:

Cannot get srcset to work cross device

I've got a main header image:
<img class="hero" src="/assets/images/Food-Spread-500x167.jpg" alt="banner image" sizes="(min-width: 992px) 80vw, 100vw"
srcset="/assets/images/Food-Spread-500x167.jpg 500w,
        /assets/images/Food-Spread-768x256.jpg 768w,
        /assets/images/Food-Spread-992x331.jpg 992w,
        /assets/images/Food-Spread-1200x400.jpg 1200w">

The difficulty I'm having is twofold:

Which size should you set as the src fallback? Largest or smallest? IE doesn't support srcset at all, so you'd be left with a tiny image as your header!! Safari (mac) struggles with it too...
Because there no way to say 'n'vw 2x  how do you get this to work on iphone? (As it's
retina it obviously thinks it's twice as big as it is and pulls a
much larger image than required). Is there something that can be done about this??
Thanks in advance...

A:

You can pick any one you like! You have to make a tradeoff between what is most appropriate for legacy desktop browsers and what is most appropriate for legacy mobile browsers.
Your issue here is that Safari supports srcset with x descriptors, but not w or sizes. What happens is that the sizes attribute is ignored and it then either selects the first candidate in srcset as a "1x" or it ignores all candidates in srcset (depending on the version of Safari) and uses src instead. So you probably get the 500x167 image rendered as 500 CSS px wide, which overflows the (320 CSS px wide) viewport.
You can do two things to fix this (you can do both if you like):

Use picturefill, it will add support for w and sizes and do the intrinsic sizing.
Set the width with CSS: .hero { width:100% } 
@media (min-width: 992px) { .hero { width:80% } }

