Без метатега viewport мобильные устройства отображают страницы с типичной шириной экрана настольного компьютера, а затем уменьшают масштаб страниц, что затрудняет их чтение.
Настройка метатега viewport позволяет контролировать ширину и масштабирование области просмотра, чтобы она имела правильный размер на всех устройствах.
Почему аудит метатега вьюпорта Lighthouse не проходит
Lighthouse помечает страницы без метатега viewport:
Страница не проходит проверку, если не выполнены все следующие условия: - Раздел <head> документа содержит тег <meta name="viewport"> . - Метатег 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.