Тег viewport: как настроить область просмотра в адаптивном дизайне

Для мобильного просмотра веб-мастеры в зависимости от потребностей бизнеса выбирают способ отображения сайта: разрабатывают отдельную мобильную версию, делают адаптивную верстку или динамическую — RESS (Responsive Design + Server Side). Для корректного отображения проекта на разных моделях планшетов и десктопов также нужен адаптив под разные разрешения.

Размер, разрешение экрана, плотность пикселей у разных устройств отличаются. Выделяют такие показатели:

• диагональ экрана — размер дисплея в дюймах, измеряется от угла к углу;
• размер экрана в точках — количество точек, их устройство использует для координат;
• полное число пикселей (Rendered Pixels), которое визуализирует устройство. Значение считают с помощью множителя 1x, 2x, 3x, который устройство использует к размеру экрана в точках;
• физические пиксели — фактическое разрешение экрана в пикселях; в экранах Retina, которые используют современные модели техники Apple, более высокое разрешение изображения на экране с меньшим количеством физических пикселей.

К примеру, возьмем смартфоны: у IPhone 3 с диагональю 3.5" физическое разрешение экрана 320x480px, а плотность пикселей 163ppi. Разрешение соответствует диагонали, плотность пикселей невысокая. Если отобразить на нем текст, набранный размером 16px, он будет читаться так же хорошо, как и на экране компьютера. Модель IPhone 6 Plus с дисплеем Retina использует более высокое разрешение изображения на экране с меньшим количеством физических пикселей, полноэкранное изображение — 1242x2208px.

Экран IPhone 6 Plus. Источник: kylejlarson.com

Из-за высокой плотности пикселей тот же текст, набранный в размере 16px, будет выглядеть на экране IPhone 6 Plus значительно мельче, чем на дисплее IPhone 3 . Чтобы сделать страницу с таким текстом пригодной для чтения, нужно отмасштабировать ее, увеличив в три раза.

Отношение пикселей зависит от плотности дисплея:

• плотность менее 200 DPI (точек на дюйм) — соотношение 1.0;
• от 200 до 300 DPI — 1.5.
• более 300 DPI — соотношение представляет собой плотность/150 точек на дюйм.

В основе адаптивного дизайна лежат принципы подвижности и пропорциональности. Веб-мастеры создают макеты в высоком разрешении, располагая контент по модульной сетке из 12, 16 или 24 колонок Bootstrap, и используют адаптивную верстку. Сервер отправляет одинаковый HTML-код на все устройства, но размеры элементов CSS масштабирует под устройства с помощью CSS-правила @viewport и мета-тега "viewport" в HTML. Это позволяет добиться четких изображений и читабельного текста.

Адаптивность есть во всех современных требованиях к PSD-макетам сайта. Пример требований by andrey-hohlov на GitHub.

Как работает мета-тег viewport

Viewport — это видимая пользователю область страницы сайта без прокруток.

Видимая страница сайта на десктопе

Видимая страница сайта на смартфоне

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

Мета-тег "viewport" и CSS правило @viewport

Правило @viewport разработала компания Windows, сейчас оно поддерживается несколькими браузерами, но ожидается, что станет будущим стандартом для веб.

Разработчики контролируют масштаб отображения страницы сайта в окне устройства с помощью мета-тега "viewport" или правила @viewport, которое управляет масштабированием с помощью CSS. Тег используют для адаптивных сайтов и для ресурсов с фиксированной или гибкой разметкой в том числе.

Слева страница без мета-тега viewport, справа с мета-тегом. Источник: developers.google.com

Справа мобилопригодная страница с тегом "viewport", в котором указана область просмотра страницы — она равна ширине экрана. Пользователь не масштабирует страницу и видит контент в удобном для чтения размере, блоки контента смещены так, что горизонтальной прокрутки нет.

Как и где указывать тег "viewport"

Страницы сайта должны корректно отображаться на разных дисплеях, для этого в HTML-страницу нужно включить мета-тег "viewport", а в CSS добавить правило @viewport.

Мета-тег "viewport" размещают в блок <head> в таком виде:

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

Особенности поддержки правила @viewport браузерами есть в спецификации. Пока оно мало распространено, но скорее всего станет стандартом в CSS.

@viewport { width: device-width;} 

Сейчас к правилу @viewport рекомендуют добавлять вендорный префикс:

@-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } 

Как настроить размер окна просмотра

Атрибут "width"

Атрибут "width" адаптирует ширину окна просмотра к экрану устройства. Указывают либо целое неотрицательное значение от 200px до 10 000px, либо константу "device-width" — она означает, что устройство масштабирует ширину страницы под размер экрана.

Веб-мастер может установить конкретное число пикселей в этом атрибуте, к примеру, width=600. Так делают, если макет должен быть не менее 600px шириной. Если экран окажется больше, браузер не будет увеличивать масштаб, а станет расширять область просмотра, чтобы она растянулась до размеров экрана.

<meta name="viewport" content="width=600, initial-scale=1"> 

К примеру, на большинстве смартфонов действует стандарт "device-width" в 320px. Если пользователь смотрит сайт с мобильного устройства дисплеем 640px, изображение шириной 320px займет весь экран, используя удвоенное количество пикселей. Поскольку экран использует удвоенную плотность пикселей по сравнению со стандартным монитором, текст на маленьком экране будет казаться четче.

Какие значения масштаба использовать

Размеры видимой области страницы в окне устройства определяют по размеру экрана и плотности пикселей. Если плотность пикселей на устройстве не совпадает с плотностью изображения — фактическим количеством пикселей, то устройство должно масштабировать значения.

Многие разработчики не указывают конкретные значения пикселей в коде, а используют относительные размеры в процентах. Это позволяет браузерам подбирать масштаб, исходя из пользовательского экрана. Относительные величины в коде делают макет проще и предотвращают случаи, когда из-за неправильно подобранного значения в область просмотра не помещаются важные элементы.

Веб-мастеру будет сложно работать с сайтом, если он задался целью определить контрольные точки на макете для разных классов и моделей устройств. Список размеров экранов мобильных устройств и планшетов насчитывает 286 элементов, вместо этого достаточно вписать относительные величины в процентах. Если для блока верхнего уровня установить параметр "width=100%", на любом устройстве он поместится в экран и не будет слишком маленьким или слишком большим.

div.fullWidth { width: 100%; } 

Как использовать медиазапросы CSS

Для улучшения отображения на разных экранах в правило @viewport добавляют медиазапросы — фильтры, которые позволяют изменять стили CSS на основании характеристик устройства: ориентации, параметров экрана, ориентации и типа устройства.

С помощью медиазапросов CSS веб-мастер может настроить отображение стилей в зависимости от размера экрана устройства. Для этого применяют код:

@media (query) { /* CSS Rules used when query matches */ } 

В адаптивном дизайне применяют функции:

• "min-width" — применимо к браузеру, ширина которого больше, чем указано в запросе;
• "max-width" — к браузеру, ширина которого меньше;
• "min-height" — к браузеру, высота которого больше значения, указанного в запросе;
• "max-height" — к браузеру, высота которого меньше.

Если устройство имеет диапазон разрешения от 640 до 1024px, указанное правило @viewport будет масштабировать окно до 640px:

@media screen and (max-width: 400px) { @-ms-viewport { width: 320px; } ... } 

К примеру, установим значения:

При ширине браузера от 0 до 640px применяется max-640px.css.

При ширине браузера 500-600px применяются стили из @media.

При ширине браузера 640px и выше применяется min-640px.css.

Если в браузере ширина больше высоты — горизонтальная ориентация, применяется landscape.css.

Если в браузере высота больше ширины — вертикальная ориентация, применяется portrait.css.

Код для этих значений будет выглядеть так:

<link rel="stylesheet" media="(max-width: 640px)" href="/max-640px.css"> <link rel="stylesheet" media="(min-width: 640px)" href="/min-640px.css"> <link rel="stylesheet" media="(orientation: portrait)" href="/portrait.css"> <link rel="stylesheet" media="(orientation: landscape)" href="/landscape.css"> <style> @media (min-width: 500px) and (max-width: 600px) { h1 { color: fuchsia; } .desc:after { content:" In fact, it's between 500px and 600px wide."; } } </style> 

Как настроить отображение в зависимости от ориентации дисплея

Атрибут "initial-scale=1»

Некоторые браузеры при изменении ориентации с вертикальной на горизонтальную увеличивают масштаб. Атрибутом "initial-scale=1" указывают браузеру соотношение пикселей CSS и устройства независимо от ориентации дисплея, в соотношении один к одному. В ориентации по горизонтали страница будет выглядеть лучше. Атрибут может иметь значение от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибуты "maximum-scale", "minimum-scale" и "user-scalable"

Кроме настройки "initial-scale" у разработчика есть возможность настроить атрибуты "maximum-scale", "minimum-scale" и "user-scalable". Они ограничивают масштабирование страницы пользователем или вовсе запрещают его.

"maximum-scale" и "minimum-scale" определяют максимальный и минимальный масштаб окна. Могут иметь значения от от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибут "maximum-scale=1" при переключении ориентации оставит настройки масштаба неизменными:

<meta name="viewport" content="initial-scale=1, maximum-scale=1"> 

"user-scalable" определяет, может ли пользователь изменять масштаб. Он имеет значение "no" или "yes", по умолчанию стоит "yes".

Аналоги для правила @viewport

У "initial-scale" в мета-теге есть аналоги для правила @viewport — это дескрипторы "zoom", "max-zoom" и "min-zoom", они работают также.

@viewport { width: device-width; zoom: 2; } 

Свойство "user-scalable" в HTML имеет эквивалент "user-zoom" в CSS:

@viewport { width: device-width; user-zoom: fixed; } 

Дескриптор "orientation"

Ориентацией документа в @viewport можно управлять с помощью дескриптора "orientation". У него есть три значения:

• auto — ориентация на основе положения устройства;
• landscape — горизонтальная ориентация;
• portrait — вертикальная ориентация.

По умолчанию установлено значение auto.

Медиазапросы и "device-width"

Google в руководстве для веб-мастеров предлагает комбинировать значения "device-width" с медиа-запросами и настраивать макет в зависимости от ориентации устройства:

@media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops */ } @media screen and (max-width:479px) { /* Target portrait smartphones */ } 

Этот код позволяет настроить изменение сайта в зависимости от горизонтальной или вертикальной ориентации страницы, не указывая конкретные размеры в пикселях:

@media all and (orientation: landscape) { /* Target device in landscape mode */ } @media all and (orientation: portrait) { /* Target device in portrait mode */ } 

Сайт Института культуры в горизонтальной и вертикальной ориентации, webmasters.googleblog.com

Атрибуты "height" и "device-height"

Если на сайте есть элементы, которые меняют свой размер в зависимости от высоты окна просмотра контента, в мета-теге применяют атрибут "height" — он определяет высоту Viewport. Указывают целое неотрицательное значение "height" от 223px до 10000px или константу "device-height".

Если шаблон неадаптивный

Не рекомендуют использовать "initial-scale=1" для неадаптивных шаблонов — с такой установкой страница будет отображаться в масштабе 100%, в неадаптивном дизайне пользователю придется устанавливать масштаб вручную или прокручивать.

Не используйте "user-scalable=no" или "initial-scale=1" вместе с "maximum-scale=1" на неадаптивных шаблонах — это отключит масштабирование страницы, а без него пользователь не сможет увидеть всю страницу сайта.

Если не использовать "viewport"

В теге или правиле "viewport" браузер находит инструкции для масштабирования страницы ресурса, а если его не указать, браузер покажет пользователю стандартный размер десктопной страницы, который обычно составляет 960+px, и попробует оптимизировать содержимое увеличением шрифтов и элементов. Он покажет контент, поместившийся на экране, а пользователю придется масштабировать страницу вручную или использовать горизонтальную прокрутку.

Такие страницы поисковики не будут считать адаптивными, а значит не дадут им высокие позиции в топе. Высокий процент отказов поисковики расценят как сигнал бесполезности сайта. Мобилопригодность важна при ранжировании в Яндексе и Google. В 2016 году в Яндексе появился алгоритм «Владивосток», в 2018 «Андромеда», а Google в 2018 году заявил, что мобильный индекс будет в приоритете и для мобильной, и для десктопной выдачи. На начало 2019 перевод в мобильный индекс еще не завершен до конца.

Поисковики распознают адаптивный дизайн сайта, если у робота будет доступ к ресурсам страницы — CSS, JavaScript и изображениям. Убедитесь, что доступ в файле robots.txt открыт.

Проверить мобилопригодность страницы

Протестировать, адаптирована ли страница для мобильного просмотра, можно с помощью теста от Google. Он определит мобилопригодность и перечислит ошибки, которые нужно исправить.

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

Отображение на мобильных устройствах в числе прочих тестов покажет «Анализ сайта» от PR-CY. Он оценит мобилопригодность по нескольким параметрам, покажет область просмотра на экране и даст советы по исправлению ошибок.

Фрагмент результатов проверки сервисом «Анализ сайта»

Мета-тег "viewport" не входит в официальные стандарты, но общепризнан, его поддерживают большинство браузеров и используют многие сайты. Работа с этим тегом описана в том числе в документации Apple и в документации Android для разработчиков.

Материалы и руководства для веб-мастеров

• Требования к PSD-макетам сайта by andrey-hohlov на GitHub.
• Правило @viewport в справочнике CSS
• Спецификация @viewport
• Мета-тег "viewport" в справочнике HTML
• Руководство для веб-мастеров от Google
• Список размеров экранов мобильных устройств и планшетов
• Документация для разработчиков Apple и Android

Сайты, не адаптированные для устройств с разными экранами, теряют большую часть трафика. Адаптивным будет сайт, если его контент удобно просматривать с любого устройства — для этого разработчики размечают область просмотра с помощью мета-тега "viewport" в HTML, а в CSS иногда добавляют правило @viewport.