Вся правда о viewport и media queries

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

Что такое viewport и зачем он нужен?

Говоря viewport, я имею в виду тег:

<meta name=’viewport” value=”...”/>

С его помощью мы указываем мобильному браузеру ширину и высоту сайта и масштаб, чтобы вписать сайт в небольшой экран смартфона или планшета.

✋ Этот тег используется только на мобильных устройствах! Браузеры настольных компьютеров его игнорируют.

Какие бывают viewport и как взаимодействуют с media queries?

1. Самый популярный — для адаптива:

<meta name=”viewport” content=”width=device-width, initial-scale=1”/>

Здесь мы сообщаем мобильному браузеру, что ширина страницы соответствует ширине экрана устройства (width=device-width), и что браузер должен использовать оригинальный масштаб (initial-scale=1).

В данном случае стили будут подтягиваться из media queries, соответствующих размеру экрана смартфона и мы увидим привычную картинку:

2. Cайт без адаптива

Если сайт нужно вписать в экран смартфона:

<meta name=”viewport” content=”width=1024”/>

без initial-scale

Если сайт надо показать в оригинальном размере

<meta name=”viewport” content=”width=1024, initial-scale=1”/>

initial-scale=1

Как будут вести себя media queries в данном случае? На мобильных устройствах будут подтягиваться стили из того диапазона, в который попадает значение width.

В данном примере (width=1024) сработают стили из:
@media (min-width: 992px) and (max-width: 1149px) { … }

и не сработают стили из
@media (max-width: 991px) { ... }

✋ На десктопе при этом будут подтягиваться стили из @media, соответствующих размеру окна браузера.

Как сделать адаптив только для десктопа и планшета?

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

1.Добавляем viewport <meta name=”viewport” content=”width=1024;”/>

Здесь значение width подбирается таким образом, чтобы вписать нужный диапазон media queries в экран планшета и смартофона.

Пример.

Возьмём 3 диапазона из bootstrap

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
ему будет соответствовать <meta name=”viewport” content=”width=990”/>

декстоп

Смартфон

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

ему— <meta name=”viewport” content=”width=1024”/>

Десктоп

Смартфон

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ему — <meta name=”viewport” content=”width=1200”/>

Десктоп

Смартфон

Т.е. указав width=1024, вы увидите на планшете и смартфоне версию сайта, соответствующую десктопной версии в окне браузера шириной 992px - 1149px;

2. Задаём фиксированную ширину body, html равную минимально ширине, до которой можно сжать окно бразуера

@media (max-width: 991px) {

body, html {

•   width: 990px;

}

}

Когда вы уменьшите размер окна браузера меньше чем на 991px, ширина страницы зафиксируются и появится горизонтальная прокрутка.

3. Подгоняем сетку bootstrap.

На десктопе:

Сработает сетка, соответствующая ширине окна браузера: окно браузера шириной 500px включит сетку .col-xs-*. Фиксированная ширина body в 990px здесь ни на что не повлияет.

На мобильных устройствах:

Если мы указали ширину viewport равной 1024 пикселя, то сработают сетки .col-md-* .col-sm-* .col-xs-* (слева направо, если левая не задана, работает правая).

К чему это я?

Если вам нужен адаптив только до планшета, а для смартфона предусмотрена мобильная версия, мобильное приложение или заглушка, то не нужно мудрить с js – достаточно верно указать viewport.