Как исправить проблемы с атрибутами srcset и sizes?

Question

[Mak_Pet]

На текущий момент прохожу эти уроки https://developer.mozilla.org/ru/docs/Learn/HTML/M... Дошел до атрибутов srcset и sizes, в статье говориться, что эти атрибуты должны подгружать более мелкие картинки в зависимости от размера экрана, но на практике это работает не так.

https://github.com/MakPet/repo3/blob/master/index.html - вот ссылка на мой репозиторий с HTMl кодом и https://makpet.github.io/repo3/ - ссылка на git pages.

<img srcset="img2_320w.jpg 320w,
                     img2_480w.jpg 480w,
                     img2_800w.jpg 800w"
             sizes="(max-width: 320px) 280px,
                    (max-width: 480px) 440px,
                    800px"
             src="img2_800w" alt="Nature">

У меня же при ширине экрана в 360w загружается картинка шириной 800px, хотя должна загружаться шириной 480 px, так как 360w<max-width: 480px. Но ширина слота почему-то определяется верно - 440px



Так же если ширина экрана будет <320w, то загружается картинка шириной 480 px, хотя должна загружаться шириной 320 px.



Точно такая же история, если смотреть на код из примеров статьи.

Ссылка на код - https://github.com/mdn/learning-area/blob/master/h...

Ссылка на Git pages - https://mdn.github.io/learning-area/html/multimedi...

Comments

[RAX7]

Note: When testing in Chrome, disable the cache when DevTools is open by checking the box under Settings > Preferences > Network. Otherwise, Chrome will favor cached images over better-fitting ones.
https://developer.mozilla.org/en-US/docs/Learn/HTM...

отключи кэш в девтулзах.
https://jsfiddle.net/ph408wqm/1/

[Mak_Pet]

RAX7, отключил, все равно загружает картинку размером 800px при ширине экрана в 360.

https://jsfiddle.net/ph408wqm/1/

Кликаю Run, картинки не обновляются, странно

[RAX7]

Mak_Pet, ¯\_(ツ)_/¯

spoiler

[Mak_Pet]

RAX7, Все работает, при ширине меньше 320px загружает нужную картинку. Скриншот прилагаю, благодарю за решение.

[Mak_Pet]

RAX7, добавил <meta name="viewport" content="width=device-width, initial-scale=1.0"> и сохранил у себя твой код, теперь снова не работает. Ширина окна 360px, условие не выполняется ¯\_(ツ)_/¯

[Mak_Pet]

В адаптивном режиме все работает, переключаюсь в режим мобильного устройства - нет.