Не имеет тега с шириной или начальным масштабом

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

Установка метатега области просмотра позволяет вам контролировать ширину и масштабирование области просмотра, чтобы ее размер был правильным на всех устройствах.

Как происходит сбой аудита метатегов области просмотра Lighthouse

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.

Ресурсы