Как настроить область просмотра в адаптивном дизайне с помощью мета-тега “viewport” или CSS правила @ viewport.
Привет, это PR-CY — создатели сервиса для анализа сайта и проверки позиций. В блоге делимся советами по улучшению и развитию сайта.
Что такое адаптивный дизайн сайта
Пользователи заходят в интернет с разных устройств: компьютеров, ноутбуков, планшетов, смартфонов. У разных моделей может быть разное разрешение экрана, и если сайт некорректно отображается, часть пользователей закроет ресурс.
Сайт должен быть доступен для всех типов устройств, он должен не просто открываться на сайте, а быть удобным в использовании.
Адаптивный сайт — это какой?
- Страницы корректно отображаются вне зависимости от разрешения экрана.
- Прокрутка контента только вертикальная.
- На смартфонах масштабировать отображение контента вручную не требуется.
- Пользователю комфортно читать текст, рассматривать изображения, скроллить контент, заполнять графы, оформлять покупки.
Чтобы сделать сайт адаптивным, разработчики создают макеты в высоком разрешении и используют адаптивную верстку.
Как это работает: сервер отправляет одинаковый HTML-код на все устройства, но размеры элементов CSS масштабирует под устройства с помощью CSS-правила @viewport и мета-тега "viewport" в HTML. Это позволяет добиться четких изображений и читабельного текста.
Что такое viewport
Viewport — это видимая пользователю область страницы сайта без прокруток.
Разработчики контролируют масштаб отображения страницы сайта в окне устройства с помощью мета-тега "viewport" или правила @ viewport, которое управляет масштабированием с помощью CSS. Тег используют для адаптивных сайтов и для ресурсов с фиксированной или гибкой разметкой в том числе.
Справа мобилопригодная страница с тегом "viewport", в котором указана область просмотра страницы — она равна ширине экрана. Пользователь не масштабирует страницу и видит контент в удобном для чтения размере, блоки контента смещены так, что горизонтальной прокрутки нет.
Как и где указывать viewport
Мета-тег "viewport" размещают в блок <head> в таком виде:
<meta name="viewport" content="width=device-width, initial-scale=1">
Правило @ viewport, управляет масштабированием с помощью CSS:
@viewport { width: device-width;}
Особенности поддержки правила @viewport браузерами есть в спецификации. Сейчас к правилу @viewport рекомендуют добавлять вендорный префикс:
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
Как настроить размер окна просмотра
Атрибут "width" адаптирует ширину окна просмотра к экрану устройства. Используют один из вариантов:
- целое неотрицательное значение от 200px до 10 000px;
- константу "device-width" — она означает, что устройство масштабирует ширину страницы под размер экрана.
Список размеров экранов мобильных устройств и планшетов насчитывает 286 элементов. Лучше вместо этого использовать относительные величины в процентах. Это позволит браузерам подобрать масштаб, исходя из пользовательского экрана.
Если для блока верхнего уровня установить параметр "width=100%", на любом устройстве он поместится в экран и не будет слишком маленьким или слишком большим.
div.fullWidth {
width: 100%;
}
Как настраивать макет по ориентации
Google в руководстве для веб-мастеров предлагает комбинировать значения "device-width" с медиа-запросами и настраивать макет в зависимости от ориентации устройства.
Этот код позволяет настроить изменение сайта в зависимости от горизонтальной или вертикальной ориентации страницы, не указывая конкретные размеры в пикселях:
@media all and (orientation: landscape) {
/* Target device in landscape mode */
}
@media all and (orientation: portrait) {
/* Target device in portrait mode */
}
Для элементов, которые меняют размер
Если на сайте есть элементы, которые меняют свой размер в зависимости от высоты окна просмотра контента, в мета-теге применяют атрибут "height" — он определяет высоту Viewport. Указывают целое неотрицательное значение "height" от 223px до 10000px или константу "device-height".
Что будет, если не использовать viewport
В теге или правиле "viewport" браузер находит инструкции для масштабирования страницы ресурса, а если его не указать, браузер покажет пользователю стандартный размер десктопной страницы, который обычно составляет 960+px, и попробует оптимизировать содержимое увеличением шрифтов и элементов. Он покажет контент, поместившийся на экране, а пользователю придется масштабировать страницу вручную или использовать горизонтальную прокрутку.
Такие страницы поисковики не будут считать адаптивными, а значит не дадут им высокие позиции в топе. Высокий процент отказов поисковики расценят как сигнал бесполезности сайта.
Поисковики распознают адаптивный дизайн сайта, если у робота будет доступ к ресурсам страницы — CSS, JavaScript и изображениям. Убедитесь, что доступ в файле robots.txt открыт.
Проверить мобилопригодность страницы
Протестировать, адаптирована ли страница для мобильного просмотра, можно с помощью теста от Google. Он определит мобилопригодность и перечислит ошибки, которые нужно исправить.
Отображение на мобильных устройствах в числе прочих тестов покажет «Анализ сайта» от PR-CY. Он оценит мобилопригодность по нескольким параметрам, покажет область просмотра на экране и даст советы по исправлению ошибок.
Мета-тег "viewport" не входит в официальные стандарты, но общепризнан, его поддерживают большинство браузеров и используют многие сайты. Работа с этим тегом описана в том числе в документации Apple и в документации Android для разработчиков.
Сайты, не адаптированные для устройств с разными экранами, теряют большую часть трафика.
Подробнее настройки мы разобрали в статье на сайте Тег viewport: как настроить область просмотра в адаптивном дизайне
