Без метатега области просмотра мобильные устройства отображают страницы с типичной шириной экрана настольного компьютера, а затем уменьшают их, что затрудняет их чтение.
Установка метатега области просмотра позволяет вам контролировать ширину и масштабирование области просмотра, чтобы ее размер был правильным на всех устройствах.
Как происходит сбой аудита метатегов области просмотра Lighthouse
Lighthouse помечает страницы без метатега области просмотра:
![Аудит Lighthouse показывает, что на странице отсутствует область просмотра](https://developer.chrome.google.cn/static/docs/lighthouse/best-practices/viewport/image/lighthouse-audit-shows-pa-6f514cc3b4e29.png?authuser=5&hl=ru)
Страница не проходит аудит, если не соблюдены все эти условия: - <head>
документа содержит тег <meta name="viewport">
. – Метатег области просмотра содержит атрибут content
. - Значение атрибута content
включает width=
.
Как добавить метатег области просмотра
Добавьте тег <meta>
области просмотра с соответствующими парами ключ-значение в <head>
вашей страницы:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Вот что делает каждая пара ключ-значение: - width=device-width
устанавливает ширину области просмотра равной ширине устройства. - initial-scale=1
задает начальный уровень масштабирования, когда пользователь посещает страницу.
Начальная шкала менее 1
Если initial-scale
установлено значение меньше 1, это может привести к тому, что браузеры будут включать функцию масштабирования двойным касанием , которая обычно используется для сайтов для настольных компьютеров, которые не оптимизированы для мобильных устройств. Это добавляет задержку в 300 миллисекунд к любому взаимодействию с касанием, пока браузер ждет, чтобы проверить, произойдет ли второе «двойное» касание. Таким образом, аудит также завершается неудачно, если для исходного масштаба установлено значение меньше 1.