В предыдущей части мы разобрались с экранами, пикселями, разрешениями и остановились на предположении, что браузер и устройство будут иметь одно и то же виртуальное разрешение. Так ли это?
Переместимся в 2007 год, когда появился первый айфон. Веб-сайтов для «больших» экранов (от 1000 пикселей по ширине) в то время уже было много и требовалось их как-то уместить на небольшом экране айфона разрешением 320×480 реальных пикселей.
Тогда Эппл придумали такую штуку, как viewport, что переводится как «область просмотра» и, в общем-то, ее и представляет.
Чтобы понять суть вьюпорта, представьте, что экран смартфона (например, наш Sony Xperia Z) — это обычный (не ретиновый!) монитор, причем он имеет собственное разрешение, которое не зависит ни от физического разрешения матрицы смартфона (1080×1920), ни от виртуального разрешения интерфейса (360×640 dp).
Этот виртуальный монитор внутри экрана смартфона и есть вьюпорт.
Чтобы не путать его с одноименным тегом viewport, с помощью которого задаются параметры этого виртуального экрана, я буду писать это слово по-русски. То есть вьюпорт — это виртуальный экран, а viewport — html метатег.
В реальности ситуация будет несколько иной: верхняя часть экрана будет занята строкой состояния и интерфейсом браузера, размеры которого, напомню, задаются в dp.
Разрешение вьюпорта задается в так называемых css-пикселях, потому что размеры элементов сайта (размер шрифта, отступы и т.д.) обычно определяются через стилевой файл с расширением css.
Откуда появилась цифра в 980 css-пикселей? Вспомним еще раз начало статьи: до 2007 года вьюпорта не существовало, поэтому при разработке сайта его параметры никак не задавались. Говоря иначе, в коде сайта метатег viewport отсутствовал.
В такой ситуации мобильный браузер считает ширину области просмотра равной 980 css-пикселей (от 800 до 1024 у разных устройств) — как мы увидим далее, этой ширины достаточно, чтобы показать сайт шириной ~ 1000 пикселей.
Посмотрим на поведение браузера в этом случае. Представьте, что мы пришли в галерею современного искусства, где на стенах вместо картин висят сайты. Выглядит это как-то так.
В музее нам выдали картонную рамку в виде смартфона с отверстием в центре размером с экран, которую мы держим в руке и смотрим через нее на картину-сайт (не спрашивайте «зачем?», будем считать, что современное искусство лучше воспринимается через рамку).
Если подойти близко к полотну, то мы увидим только часть картины.
Если отойти — картину целиком.
Как вы, наверное, уже догадались — отверстие в рамке и есть наш мобильный браузер. Он показывает или часть контента, или сайт целиком, но смасштабированый по размеру экрана.
Итак, мобильный браузер пытается оптимизировать показ сайта либо масштабируя содержание по размеру экрана, либо показывая только часть контента.
Важный момент — при изменении масштаба ширина области просмотра в css-пикселях не меняется!
Даже поворот экрана смартфона не изменяет ширины области.
Давайте теперь зададим размер вьюпорта явно. Как я уже писал выше, его параметры задаются одноименным метатегом viewport, который расположен в заголовке html-документа.
<meta name="viewport" content="width=1024">
Здесь параметр width задает ширину области просмотра равной 1024 css-пикселям.
Проведем любопытный эксперимент, смысл которого будет понятен, если вы читаете в данный момент со смартфона. Очевидно, что этот сайт адаптирован к размеру экрана.
Однако если задать размера вьюпорта равным, например, 1000 css-пикселям, то браузер покажет полную версию, как на обычном не ретиновом мониторе шириной 1000 пикселей (аналогично, или часть контента, или сайт целиком).
Обратите внимание, что браузер воспринимает сайт как «большой» и даже предлагает адаптировать страницу для мобильных устройств.
Получается, что метатег viewport отвечает исключительно за параметры виртуального экрана и, вообще говоря, не имеет отношения к адаптивности.
Итак, если сайт не оптимизирован под мобильные устройства (а хочется добиться приемлемого отображения), то достаточно указать в качестве значения параметра width минимальную ширину, при котором сайт вмещается на экран целиком.
Либо отладить вид сайта на конкретном разрешении (например, 768 пикселей по ширине — iPad в вертикальной ориентации) и задать это разрешение через метатег viewport.
Тем не менее, желательно избегать жесткой установки ширины страницы. Это связано с тем, что заранее не известно на каком устройстве будет просматриваться сайт. Лучше задать вьюпорту ширину устройства:
<meta name="viewport" content="width=device-width, initial-scale=1">
В этом случае ширина окна просмотра браузера равна виртуальному разрешению интерфейса устройства в dp и, в отличие от жестко заданного вьюпорта, меняется при повороте экрана.
Кроме того, появился параметр initial-scale=1, который обеспечивает соотношение 1:1 между css-пикселями и виртуальными пикселями устройства. Проще говоря, 1 css-pixel = 1 dp.
Для тех, кто предпочитает тестировать все сам, предлагаю зайти на специально созданную мною страницу и «пощупать» разные режимы вьюпорта. Откройте ее на своем мобильном устройстве и попробуйте переключаться между разными режимами, поворачивать экран и смотреть, что при этом происходит.
Осталось разобраться с адаптивностью. Это обширная тема, которая выходит за рамки данной статьи, поэтому предлагаю изучить ее самостоятельно. Я же объясню основные принципы.
Вспомним самый первый абзац из первой части этой серии статей. Суть адаптивного дизайна — автоматически подстраиваться под любой размер экрана. При этом на браузер монитора, экран ноутбука или смартфона передается один и тот же код, но расположение элементов на странице меняется в зависимости от устройства.
Достигается это при помощи медиа-запросов — специальных секций в CSS файле, которые содержат информацию о том, как именно выводить содержимое страницы для заданной области просмотра.
Рассмотрим следующий запрос:
@media screen and (max-width: 980px) { … }
Параметр max-width означает, что запрос отвечает за ширину области просмотра от 0 до 980 рх. Такую секцию располагают в конце основного стилевого файла, а между фигурными скобками добавляют альтернативные стили, которые переопределяют правила, установленные ранее для «большого» экрана.
Здесь 980 рх — так называемая «переломная» точка (break point) или ширина, на которой дизайн сайта существенно меняется: например, содержимое не помещается на экране (появляется горизонтальная полоса прокрутки).
Поиск точки «перелома» прост: откройте сайт в браузере и постепенно уменьшайте область просмотра, пока дизайн не «сломается». Фактически контент будет вам подсказывать, как подстроить макет под размер экрана.
Аналогично можно добавить еще один медиа-запрос:
@media screen and (max-width: 980px) { … }
@media screen and (max-width: 768px) { … }
Тогда основной стилевой файл будет отвечать за «большие» экраны шириной более 980 рх, первая секция — за область просмотра от 769 до 980 рх, вторая — от 0 до 768 рх.
При продуманном дизайне достаточно 3-4 брейк-поинтов, например: 980 рх, 768 рх, 640 рх и 480 рх.
