Вопрос по responsive-design, google-chrome, srcset, opera – В последних версиях Chrome / Opera неправильно работает srcset?

5

Я работаю над страницей со следующей разметкой:

<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
       /banner_home.600x400.jpg 480w,
       /banner_home.728x242.jpg 768w,
       /banner_home.920x306.jpg 960w,
       /banner_home.1234x400.jpg 1280w">

и кажется, что в последних версиях Chrome & Opera они игнорируют любой размер экрана и выводят только тот файл, который указан последним (так, в моем случае, 1234x400.jpg).

Используя Picturefill, Firefox и Safari показывают правильное изображение на небольших экранах.

Во время моего сегодняшнего тестирования я запустил Opera, которую давно не открывал. Когда он впервые запустился, он был на v25, и на меньших экранах показывалось бы правильное изображение.

Затем я заметил, что обновление было загружено, поэтому я запустил его, обновился до версии v27, и тогда Opera показала ту же проблему, что и последний Chrome.

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

Кто-нибудь еще может подтвердить это или я просто делаю это неправильно?

Codepen чтобы проиллюстрировать, что я имею в виду.

Ваш Ответ

1   ответ
13

держа проверять это неправильно: D

A менять То, что вошло в Chrome 40, означает, что когда ресурс высокой плотности доступен в кеше (например, максимально возможное изображение в вашем примере), это ресурс, который будет выбран, поскольку нет смысла повторно загружать другой, более низкий разрешение одно.

Если вы действительно хотите проверить, какой ресурс загружается на небольших устройствах (не то, чтобы вы полагались на какой ресурс выбирается, потому чтоsrcset не об этом), вы можете либо протестировать на реальном устройстве, либо, альтернативно, открыть сеанс инкогнито, изменить размер браузера (или эмулировать устройство) и только затем загрузить тестовую страницу.

Я также создалнемного более понятный контрольный пример из вашего, когда вы можете увидеть, какое изображение было загружено.

Также: из вашего примера похоже, что вы используете изображения с разными пропорциями внутри srcset. Это не то, что вы должны использоватьsrcset для, а лучше использовать<picture>, это дает гарантии относительно того, какой ресурс загружен, поэтому ваш макет не сломается, потому что загружено неправильное изображение.

Когда вы используетеsrcset нет «неправильного» изображения. Браузер может выбрать тот, который ему подходит (потому что он находится в кеше, связь низкая, пользовательские настройки говорят об этом и т. Д.).

Похожие вопросы