Настройте область просмотра

Это правило срабатывает, когда PageSpeed Insights обнаруживает, что для вашей страницы не определена область просмотра или указанная область просмотра не адаптируется под разные устройства.

Общая информация

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

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

Рекомендации

На страницах, оптимизированных для мобильных устройств, в блоке <head> должен присутствовать метатег viewport следующего содержания: width=device-width, initial-scale=1.

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

Дополнительная информация

Термины:

  • Аппаратный пиксель: физический пиксель на экране. Например, у iPhone 5 ширина экрана составляет 640 аппаратных пикселей.
  • Аппаратно-независимый пиксель (Device-independent pixel, dip): результат масштабирования пикселей устройства до размеров опорного пикселя для просмотра с нормального расстояния, представляет собой примерно одну величину на всех устройствах. Ширина экрана iPhone 5 составляет 320 аппаратно-независимых пикселей.
  • Пиксель CSS: единица, используемая для отображения страницы в области просмотра. При указании размеров в стилях (например, width: 100px) используются пиксели CSS. Отношение пикселей CSS к аппаратно-независимым пикселям является коэффициентом масштабирования страницы.

Страницы для настольных ПК на мобильных устройствах

Если на странице не настроена область просмотра, мобильные браузеры для ее отображения используют резервную ширину (от 800 до 1024 пикселей CSS). Масштаб страницы изменяется таким образом, чтобы отобразить ее целиком на экране. Для взаимодействия с ней пользователям приходится увеличивать масштаб.

Метатег viewport

Метатег viewport сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб. Этот тег необходимо добавлять в раздел <head>.

Область просмотра фиксированной ширины

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

Адаптивная область просмотра

Если для метатега viewport установить значение width=device-width, ширина страницы выбирается в соответствии с размером экрана устройства в аппаратно-независимых пикселях. Это позволяет странице пересчитывать положение элементов для корректного показа на разных экранах.

В некоторых операционных системах, например в iOS и Windows Phone, ширина страницы при повороте в горизонтальный режим остается неизменной, и вместо перераспределения контента выполняется масштабирование. Атрибут initial-scale=1 заставит браузер установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства. Это позволит использовать всю ширину экрана в горизонтальном состоянии.

Слева: поворот iPhone 5, атрибут width=device-width, ширина в горизонтальной ориентации составляет 320 пикселей.
Справа: поворот iPhone 5, атрибут width=device-width, initial-scale=1, ширина в горизонтальной ориентации составляет 568 пикселей.

Для использования адаптивной области просмотра ваши страницы должны быть предназначены для работы с разной шириной. Рекомендации см. в статье Определение размеров контента для области просмотра.

Прочая информация

Избегайте атрибутов minimum-scale, maximum-scale, user-scalable.

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

@viewport

Несмотря на то что метатег viewport широко поддерживается, он не входит в формальный стандарт. Эта функция является частью спецификации CSS Device Adaptation (Адаптация устройства в CSS). Пока эта спецификация не завершена и не применяется повсеместно, авторам следует использовать метатег viewport отдельно и в сочетании со стилями @viewport в целях совместимости.

Ресурсы: