Подтвердить что ты не робот

При использовании запросов @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) {...}, будут ли мобильные устройства также загружать большое изображение?

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

Тим Кадлец собрал для этого несколько удивительных исследований - Результаты загрузки медиа-запросов и активов

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

Ответ 3

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

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

Большинство современных настольных браузеров поставляются с инструментами разработчика. Моим нынешним фаворитом является FireFox, темный и красивый веб-инспектор (для 3D-просмотра особенно важно умереть). Но как насчет на Мобиле? Самые большие части вашей мобильной аудитории не будут в браузерах, которые поставляются с инструментами разработки.

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

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

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

Удачи!