не выбирает правильный размер на мобильном телефоне

Question

Пример <img srcset> имеет размерные точки 300 Вт, 600 Вт, 1200 Вт, 2400 Вт.Мобильный (как в devtools, так и в реальном Chrome на Android (moto g3)) ВСЕГДА использует 1200 Вт (даже если ширина окна мобильного устройства значительно меньше и должна использовать 600 Вт) - мне известно о поведении кэширования Chrome с большими изображениями и во всех тестахбыли выполнены с отключенным кэшем.

Предоставлен пример кода, который отображает некорректное поведение <img srcset>, а также реализацию, использующую <picture>, которая ТОЧНО соответствует поведению, ожидаемому от srcset.

https://codepen.io/MiDri/pen/OYmReg

<img src='/1x1.gif' srcset='https://dummyimage.com/300x200/0000ff/fff 300w, https://dummyimage.com/600x400/000/fff 600w, https://dummyimage.com/1200x800/ff0000/000 1200w, https://dummyimage.com/2400x1600/00ff00/000 2400w'>

<picture>
    <source srcset='https://dummyimage.com/300x200/0000ff/fff'   media='(max-width:300px)'>
    <source srcset='https://dummyimage.com/600x400/000000/fff'   media='(max-width:600px)'>
    <source srcset='https://dummyimage.com/1200x800/ff0000/000'  media='(max-width:1200px)'>
    <source srcset='https://dummyimage.com/2400x1600/00ff00/000' media='(max-width:2400px)'>
    <img src='/1x1.gif'>
</picture>

Кто-нибудь знает, ПОЧЕМУ srcset ведет себя так?

Answer 1

Разобрался! Это связано с DPR (Device Pixel Ratio) и тем, как спецификаторы-кандидаты srcset игнорируют его ... При использовании медиазапросов DPR учитывается, поскольку они технически являются частью спецификации css.

Пример: iPhone6X имеет разрешение экрана 1920 x 1080, но из-за его DPR 3,0 представляет CSS (и, следовательно, медиазапросы) & JS как 414x736.

Это означает, что если пользователь iPhone6X посещает вашу страницу в портретной ориентации и ваши изображения srcset составляют 300 Вт, 600 Вт, 1200 Вт, 2400 Вт; браузер выберет изображение 1200 Вт.

Надеюсь, это кому-нибудь поможет.