При использовании запросов @media загружает ли телефон нерелевантные запросы и изображения?

Если я основываю свой CSS на стиле для мобильных устройств, а затем использую запросы @media для постепенно увеличивающихся дисплеев (планшетов, настольных компьютеров и т. д.), будут ли мобильные устройства использовать стили для настольных компьютеров?

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

Я пытаюсь использовать один фон для большей версии сайта:

.splash {
    background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}

и еще для мобильной версии:

.splash {
    background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}

Если я применю мобильный CSS перед любыми медиа-запросами и добавлю ниже CSS для больших медиа, используя такой запрос, как @media screen and (min-device-width: 481px) {...}, будут ли мобильные устройства также загружать большое изображение?


mobile css page-load-time
person ChaBuku Bakke    schedule 20.05.2013    source источник
comment
Вы можете проверить обратное в настольном браузере. Поместите фоновое изображение в max-device-width: 1px и проверьте в инструментах разработчика, загружается ли оно.   -  person millimoose    schedule 20.05.2013
comment
Согласен с @millimoose. Проверьте вкладку сети в инструментах разработки браузера.   -  person Christopher Marshall    schedule 20.05.2013
comment
(Тем не менее, насколько я могу судить, кажется, что в медиазапросах, которые не применяются, ничего не извлекается.)   -  person millimoose    schedule 20.05.2013
comment
исследование, которое стоит прочитать здесь: timkadlec.com/2012/04/media -query-asset-downloading-results   -  person Ravimallya    schedule 11.04.2015

Ответы (3)


arrow_upward
37
arrow_downward

Поведение зависит от браузера, но iOS Safari и Android Chrome будут учитывать медиа-запросы и загружать фоновые изображения только для соответствующих медиа-запросов.

Если вы хотите проверить это поведение, попробуйте загрузить страницу с помощью Mobitest (http://mobitest.akamai.com/) или привязанное устройство.

Если вы используете отдельные CSS-файлы (а я бы вас тоже не уговаривал), браузер загрузит каждый из них, даже если они ему не нужны, это ограничение CSSOM. Некоторые браузеры, например. WebKit и Blink расставляют приоритеты в таблицах стилей, поэтому те, которые необходимы для отображения страницы, загружаются первыми, а остальные в какой-то момент позже.

Одна вещь, на которую следует обратить внимание, — это display:none на изображениях контента, так как во многих ситуациях это не помешает загрузке. Тим Кадлек подробно исследует это здесь: http://timkadlec.com/2012/04/media-query-asset-downloading-results/

person Andy Davies    schedule 21.05.2013
comment
Улучшилось ли это со времени статьи Тима в 2012 году? - person gpr; 30.07.2016
comment
любопытно, но если вы измените размер браузера так, что будет выбрано другое фоновое изображение, но оно еще не загружено, исчезнет ли фон или сохранится ли старое изображение до его замены? - person gdbj; 11.06.2017
comment
@gdbj Фон исчезнет, ​​потому что css указывает другой для использования. Он ведет себя так же, как при начальной загрузке страницы для этого размера экрана. - person jjspace; 14.02.2018

arrow_upward
8
arrow_downward

Тим Кадлек провел для этого отличное исследование — Media Query & Asset Download. Результаты

Ответ на ваш конкретный вопрос содержится в тесте № 4 — результаты неоднозначны. Лучше иметь медиа-запросы для обоих ваших изображений.

person blogjunkie    schedule 13.11.2013

arrow_upward
3
arrow_downward

Звучит так, как будто это будет в значительной степени зависеть от браузера, но я полагаю, что любой достойный мобильный браузер попытается сократить использование данных, не загружая изображения (и, возможно, не загружая целые таблицы стилей), которые отмечен как не для этого. Кроме того, многие мобильные браузеры предпочитают не распознаваться как мобильные браузеры. Я знаю, что ненавижу, когда я открываю сайт на своем iPad, а мобильная таблица стилей заставляет меня просматривать узкую полоску сайта с одной колонкой на моем 9,7-дюймовом экране.

Таким образом, медиа-запросы ненадежны, но все же полезны (они действительно ничему не вредят, если их использовать ответственно), и это не помогает решить довольно тупой (но все же хороший) вопрос; пора делать тесты!

Большинство современных настольных браузеров поставляются с инструментами разработчика. В настоящее время моим фаворитом является темный и симпатичный веб-инспектор FireFox (трехмерное представление особенно ценно). Но как насчет мобильного? Большая часть вашей мобильной аудитории не будет использовать браузеры, поставляемые с инструментами разработки.

Ну, у вас есть пара вариантов:

  • Firebug Lite дает неоднозначные результаты в мобильных браузерах, но в большинстве случаев это отличный выбор, когда другие инспекторы недоступны. Кажется, это работает в iOS и других мобильных браузерах с Но поддержка HTML5.
  • В этом вопросе предлагается использовать что-то под названием "weinre". Я никогда не использовал его, но он выглядит достаточно законным.
  • Если вы согласны ориентироваться только на несколько определенных браузеров, многие из них ДОЛЖНЫ включать инструменты разработчика. Например, Google Chrome для Android!

Что бы вы ни выбрали, вы будете искать какое-то средство просмотра активов; возможно, просмотр временной шкалы. Любой инструмент, который позволит вам увидеть, что загрузила страница, в каком порядке она ее загрузила и сколько времени потребовалось для загрузки.

Удачи!

person Sandy Gifford    schedule 20.05.2013
comment
Я могу точно сказать, что почти каждый браузер загружает все таблицы стилей, на которые ссылаются, включая альтернативные и те, которые ограничены медиа-запросом (подтверждено с помощью мобильного эмулятора Opera и эмулятора Android). С другой стороны, изображения, на которые есть ссылки в таблицах стилей, загружаются только по мере необходимости. - person cimmanon; 21.05.2013
comment
Хорошо знать! Я надеюсь, что остальная информация достаточно верна? - person Sandy Gifford; 21.05.2013
comment
Вам действительно не нужны инструменты разработчика, вы можете регистрировать HTTP-запросы на своем маршрутизаторе или иным образом перехватывать трафик с телефона. - person millimoose; 21.05.2013
comment
Вы могли! Это было бы альтернативным решением, и вы должны обязательно представить для него отдельный ответ! Было бы отлично иметь информацию здесь. - person Sandy Gifford; 21.05.2013