Без метатега области просмотра мобильные устройства отображают страницы с типичной шириной экрана настольного компьютера, а затем масштабируют страницы, что затрудняет их чтение.
Установка метатега области просмотра позволяет вам контролировать ширину и масштабирование области просмотра, чтобы ее размер был правильным на всех устройствах.
Как происходит сбой аудита метатегов области просмотра Lighthouse
Lighthouse помечает страницы без метатега области просмотра:
Страница не проходит аудит, если не соблюдены все эти условия: - <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.