Какие способы сокрытия контента вы знаете, при адаптивной верстки?

Question

[massef]

Интересует вопрос производительности.
Как "точечно" отдавать контент в зависимости от устройства?
Ведь например те же изображения, хоть ты их и скрываешь для мобильных устройств, но они все равно скачиваются браузером, тем самым замедляя загрузку.

Интересует какие есть способы борьбы с этим? Не только с изображением, с теми же шрифтами, плагинами, видео и т.д.

Answer 1

[Сергей delphinpro]

используйте при разработке подход называемый "mobile first"
сначала верстайте под мобильные. потом через медиа-запросы подключайте остальное.
например следующий код

@media (min-width: 960px) {
  body {
    background: url('big-image.jpg');
  }
}

будет загружать картинку только при ширине просмотра более 960 пикселей.

Comments

[massef]

Согласен, но вопрос ведь не только в картинках. Как быть например с плагинами? Файлы ведь всё равно будут скачиваться. И даже взять те же картинки, что делать с img?

[Сергей delphinpro]

Плагины какие? Как правило все скрипты сжимаются в один единственный файл и он подключается к странице. Но можно и по отдельности. проверяете размер экрана, создаете тег script вставляете его в документ. файл скрипта будет загружен после вставки.
картинки - https://developer.mozilla.org/en-US/docs/Web/HTML/...

[Сергей delphinpro]

правда picture source хреново поддерживается :)

Answer 2

[Андрей Козлов]

Редирект на страничку с @media-запросом, на которой и подберется одна из схем загрузки