Без метатега области просмотра мобильные устройства отображают страницы с типичной шириной экрана настольного компьютера, а затем уменьшают их масштаб, что затрудняет их чтение.
Установка метатега области просмотра позволяет вам контролировать ширину и масштабирование области просмотра, чтобы ее размер был правильным на всех устройствах.
Как происходит сбой аудита метатегов области просмотра 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.
Ресурсы
- Исходный код имеет тег
<meta name="viewport">
с проверкойwidth
илиinitial-scale
- Основы адаптивного веб-дизайна
- Использование метатега viewport для управления макетом в мобильных браузерах
Без метатега области просмотра мобильные устройства отображают страницы с типичной шириной экрана настольного компьютера, а затем уменьшают их масштаб, что затрудняет их чтение.
Установка метатега области просмотра позволяет вам контролировать ширину и масштабирование области просмотра, чтобы ее размер был правильным на всех устройствах.
Как происходит сбой аудита метатегов области просмотра 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.
Ресурсы
- Исходный код имеет тег
<meta name="viewport">
с проверкойwidth
илиinitial-scale
- Основы адаптивного веб-дизайна
- Использование метатега viewport для управления макетом в мобильных браузерах
Без метатега области просмотра мобильные устройства отображают страницы с типичной шириной экрана настольного компьютера, а затем масштабируют страницы, что затрудняет их чтение.
Установка метатега области просмотра позволяет вам контролировать ширину и масштабирование области просмотра, чтобы ее размер был правильным на всех устройствах.
Как происходит сбой аудита метатегов области просмотра 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.
Ресурсы
- Исходный код имеет тег
<meta name="viewport">
с проверкойwidth
илиinitial-scale
- Основы адаптивного веб-дизайна
- Использование метатега viewport для управления макетом в мобильных браузерах
Без метатега области просмотра мобильные устройства отображают страницы с типичной шириной экрана настольного компьютера, а затем уменьшают их масштаб, что затрудняет их чтение.
Установка метатега области просмотра позволяет вам контролировать ширину и масштабирование области просмотра, чтобы ее размер был правильным на всех устройствах.
Как происходит сбой аудита метатегов области просмотра 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.