Сообщение PageSpeed Insights "Настройте область просмотра" означает, что для целевой страницы не определена область просмотра или указанная область просмотра не адаптируется под разные устройства.
Мобильные браузеры отображают страницы в виртуальном «окне» (viewport), которое как правило, шире, чем экран, поэтому им не нужно сжимать каждый макет страницы в крошечном окне (что может сломать многие сайты, оптимизированные для мобильных устройств).
Viewport определяет, как веб-страница отображается на мобильном устройстве. Если она не указана, ширина страницы считается равной стандартному значению для ПК, и она уменьшается, чтобы поместиться на экране. Благодаря области просмотра вы можете управлять шириной страницы и ее масштабированием на различных устройствах.
На страницах, оптимизированных для мобильных устройств, в блоке <head> должен присутствовать метатег viewport следующего содержания:
Если для метатега viewport установить значение width=device-width, ширина страницы выбирается в соответствии с размером экрана устройства в аппаратно-независимых пикселях. Это позволяет странице пересчитывать положение элементов для корректного показа на разных экранах.
Области просмотра можно присвоить определенную ширину, например width=320 или width=1024. Несмотря на то что делать это не рекомендуется, фиксированная ширина может стать временной мерой для корректного показа страниц с заданными размерами.
В некоторых операционных системах, например в iOS и Windows Phone, ширина страницы при повороте в горизонтальный режим остается неизменной, и вместо перераспределения контента выполняется масштабирование. Атрибут initial-scale=1 заставит браузер установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства. Это позволит использовать всю ширину экрана в горизонтальном состоянии.
Для использования адаптивной области просмотра ваши страницы должны быть предназначены для работы с разной шириной. Рекомендации см. в статье "определение размеров контента для области просмотра".
Избегайте атрибутов minimum-scale, maximum-scale, user-scalable. Эти атрибуты позволяют установить минимальный и максимальный масштаб или вовсе отключить возможность масштабирования области просмотра. Они отрицательно сказываются на доступности содержания, и их следует избегать.
Мобильные браузеры отображают страницы в виртуальном «окне» (viewport), которое как правило, шире, чем экран, поэтому им не нужно сжимать каждый макет страницы в крошечном окне (что может сломать многие сайты, оптимизированные для мобильных устройств).
Viewport определяет, как веб-страница отображается на мобильном устройстве. Если она не указана, ширина страницы считается равной стандартному значению для ПК, и она уменьшается, чтобы поместиться на экране. Благодаря области просмотра вы можете управлять шириной страницы и ее масштабированием на различных устройствах.
Слева: страница без метатега viewport. Справа: страница с областью просмотра, соответствующей ширине экрана устройства.
На страницах, оптимизированных для мобильных устройств, в блоке <head> должен присутствовать метатег viewport следующего содержания:
<meta name=viewport content="width=device-width, initial-scale=1">Если на странице не настроена область просмотра, мобильные браузеры для ее отображения используют резервную ширину (от 800 до 1024 пикселей CSS). Масштаб страницы изменяется таким образом, чтобы отобразить ее целиком на экране. Для взаимодействия с ней пользователям приходится увеличивать масштаб.
Если для метатега viewport установить значение width=device-width, ширина страницы выбирается в соответствии с размером экрана устройства в аппаратно-независимых пикселях. Это позволяет странице пересчитывать положение элементов для корректного показа на разных экранах.
Области просмотра можно присвоить определенную ширину, например width=320 или width=1024. Несмотря на то что делать это не рекомендуется, фиксированная ширина может стать временной мерой для корректного показа страниц с заданными размерами.
В некоторых операционных системах, например в iOS и Windows Phone, ширина страницы при повороте в горизонтальный режим остается неизменной, и вместо перераспределения контента выполняется масштабирование. Атрибут initial-scale=1 заставит браузер установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства. Это позволит использовать всю ширину экрана в горизонтальном состоянии.
Для использования адаптивной области просмотра ваши страницы должны быть предназначены для работы с разной шириной. Рекомендации см. в статье "определение размеров контента для области просмотра".
Избегайте атрибутов minimum-scale, maximum-scale, user-scalable. Эти атрибуты позволяют установить минимальный и максимальный масштаб или вовсе отключить возможность масштабирования области просмотра. Они отрицательно сказываются на доступности содержания, и их следует избегать.
CSS viewport
Несмотря на то что метатег viewport широко поддерживается, он не входит в формальный стандарт. Свойство CSS viewport является частью спецификации CSS Device Adaptation (адаптация под устройства в CSS). Пока эта спецификация не завершена и не применяется повсеместно, авторам следует использовать метатег viewport отдельно и в сочетании со стилями @viewport в целях совместимости.Дополнительные материалы:
- https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=ru
- Настройка области просмотра (документация Safari).
- Документация по области просмотра в Opera и Mozilla.
Комментарии
Отправить комментарий