Chrome responsive view vs browser window + srcset, sizes

Question

I have this code

<img
     src="https://dummyimage.com/800x400/000/fff&text=large-src"
     srcset="
     https://dummyimage.com/270x400/000/fff&text=small 270w,
     https://dummyimage.com/650x400/000/fff&text=medium 650w,
     https://dummyimage.com/800x400/000/fff&text=large 800w,
     https://dummyimage.com/1600x400/000/fff&text=xlarge 1600w"
     sizes="100%"  
     alt="test">

I'm using Chrome and I've disabled the cache in Dev tools.

The problem I have is that when I use "responsive view" it doesn't behave as expected. I don't see the images update or the expect images load - even after hard refresh.

However when I resize the Window I do (however i can't test x2 that way) What am I missing? Is there a difference with responsive view and srcset / sizes. Am I missing a pitfall here?

Possible duplicate of [@media query not working in mobile. Works fine in Chrome](https://stackoverflow.com/questions/17344339/media-query-not-working-in-mobile-works-fine-in-chrome) — Impulse The Fox, Apr 12 '18 at 14:47

score 0 · Answer 1 · answered Apr 12 '18 at 16:07

With the following code:

<img src="https://via.placeholder.com/100x100"
     srcset="https://via.placeholder.com/100x100 100w,
             https://via.placeholder.com/200x200 200w,
             https://via.placeholder.com/400x400 400w,
             https://via.placeholder.com/800x800 800w"
     sizes="50vw"/>

It seems to work as expected:

demo

Chrome responsive view vs browser window + srcset, sizes

1 Answers1