Что такое метатег viewport и как он используется
АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ
Метатег Viewport используется для адаптации сайта ко всем устройствам и задает правила отображения видимой области в мобильном браузере. Чтобы активировать тег, необходимо добавить его в раздел Head кода страницы, задав нужные параметры.
Содержание
- Что означает тег Viewport?
- Как подключить Viewport для разных устройств
- Как определить разрешение экрана конкретного устройства?
- Где прописать тег Viewport?
- Атрибуты метатега Viewport
- Когда возникла ошибка: значение метатега viewport не задано
- Как проверить адаптирована ли страница под мобильные устройства
Что означает тег Viewport?
Viewport — это область на экране устройства, которая видна пользователю без прокрутки экрана. Представьте страницу, которая нормально отображается на экране ноутбука. Буквы, значки и прочие элементы находятся в оптимальном размере, вам удобно читать текст.
Эта же страница на экране смартфона оказывается совсем неудобной для прочтения. Вам приходится двигать изображения и текст вправо и влево, вниз и вверх. Если задать тег Viewport, веб-страница примет нормальный вид:
Эта же страница на экране смартфона оказывается совсем неудобной для прочтения. Вам приходится двигать изображения и текст вправо и влево, вниз и вверх. Если задать тег Viewport, веб-страница примет нормальный вид:
Использование Viewport для корректного отображения на смартфонах
На изображении слева страница отображается без тега Viewport, а справа с его помощью задаются параметры отображения. В вариант слева не внедрен адаптивный дизайн сайта и тег Viewport, поетому он не удобен для чтения и пользователь быстрее покинет такой сайт.
При адаптивном дизайне ему будет удобнее читать текст, совершать покупки и переходить между разделами сайта. Чтобы веб-страница отображалась нормально на устройствах с разным разрешением, важно задать правильные настройки тега Viewport.
При адаптивном дизайне ему будет удобнее читать текст, совершать покупки и переходить между разделами сайта. Чтобы веб-страница отображалась нормально на устройствах с разным разрешением, важно задать правильные настройки тега Viewport.
Хотите узнать, как использовать Serpstat для поиска ошибок на сайте?
Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! ;)
Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! ;)
Персональная демонстрация
Оставьте заявку и мы проведем для вас персональную демонстрацию сервиса, предоставим пробный период и предложим комфортные условия для старта использования инструмента
Как подключить Viewport для разных устройств
Для начала ответим на вопрос: Viewport units что это? Для этого нужно понять, из чего состоит этот тег. В большинстве случаев строка с тегом Viewport выглядит так:
Первый параметр Width дает команду браузеру адаптировать по ширине устройства страницу. Масштабирование ширины страницы определяется автоматически, если указано значение «device-width». Также можно установить значение атрибута от 200 до 10000 пикселей. В этом случае параметр будет выглядеть так:
<meta name="viewport" content="width=800, initial-scale=1">В таком случае ширина макета экрана не может быть менее 800 пикселей. Если это значение окажется больше, браузер растянет видимую область веб страницы до полного масштаба. Потребность в использовании Viewport появилась после активного распространения смартфонов с высоким разрешением экрана. В них даже адаптированные под мобильные устройства сайты не всегда отображаются правильно.
Например, возьмем для сравнения два смартфона с диагональю 3,5 дюймов, но разной плотностью пикселей. В первом этот показатель составляет до 200 пикселей, а во втором — более 300 пикселей. Одна и та же веб-страница будет выглядеть по-разному на обоих смартфонах, несмотря на одинаковый размер экрана.
В первом смартфоне страница отобразится нормально и будет удобной для чтения, как на мониторе компьютера. Во втором случае из-за высокой плотности пикселей текст отобразится в два раза мельче. Чтобы страницу привести в нормальный вид, ее масштаб необходимо увеличить в два раза. Метатег Viewport может использоваться для адаптивных и неадаптивных версий сайтов.
Еще один параметр — initial-scale — означает коэффициент масштабирования. Если указано значение «1», разрешение CSS и устройства приравниваются друг к другу независимо от размера экрана. Можно указать любое значение параметра от 0.1 до 10.
Например, возьмем для сравнения два смартфона с диагональю 3,5 дюймов, но разной плотностью пикселей. В первом этот показатель составляет до 200 пикселей, а во втором — более 300 пикселей. Одна и та же веб-страница будет выглядеть по-разному на обоих смартфонах, несмотря на одинаковый размер экрана.
В первом смартфоне страница отобразится нормально и будет удобной для чтения, как на мониторе компьютера. Во втором случае из-за высокой плотности пикселей текст отобразится в два раза мельче. Чтобы страницу привести в нормальный вид, ее масштаб необходимо увеличить в два раза. Метатег Viewport может использоваться для адаптивных и неадаптивных версий сайтов.
Еще один параметр — initial-scale — означает коэффициент масштабирования. Если указано значение «1», разрешение CSS и устройства приравниваются друг к другу независимо от размера экрана. Можно указать любое значение параметра от 0.1 до 10.
Как определить разрешение экрана конкретного устройства?
По плотности пикселей. При показателе менее 200 пикселей разрешение экрана будет равно фактическому (коэффициент CSS = 1). Если плотность больше 200, но меньше 300 пикселей — разрешение будет в 1,5 раза меньше, чем физическое разрешение экрана (коэффициент CSS = 1,5). При плотности более 300 пикселей разрешение определяется по формуле:
показатель плотности / 150 с округлением до целого числа
Например, в смартфоне Galaxy S3 показатель плотности пикселей составляет 233, а разрешение экрана 480x800. В данном случае коэффициент CSS = 1,5. Значит, фактическое разрешение будет в 1,5 раза меньше указанного и составит 320x533 пикселей.
В более современном Galaxy S5 плотность пикселей экрана составляет 441, а разрешение экрана — 1080x1920. Так как плотность более 300, нужно разделить 441 на 150, после округления получится 3. Итоговое расширение — 360x640.
В более современном Galaxy S5 плотность пикселей экрана составляет 441, а разрешение экрана — 1080x1920. Так как плотность более 300, нужно разделить 441 на 150, после округления получится 3. Итоговое расширение — 360x640.
Где прописать тег Viewport?
В разделе Head каждой страницы, которую необходимо масштабировать под разрешение экрана. В метатеге используются различные атрибуты, о которых подробнее расскажем далее.
Атрибуты метатега viewport
- width — задает ширину видимой области так, чтобы она была равна CSS ширине устройства;
- initial-scale — атрибут, с помощью которого устанавливается начальный масштаб страницы;
- height — задает высоту отображаемой для просмотра области. Можно указать константу device-hight, которая означает автоматическое масштабирование под размер экрана, или числовое значение от 200 до 10000 пикселей;
- user-scalable — разрешает или запрещает пользовательское масштабирование страницы, задается значением Yes или No;
- minimum-scale — минимальный масштаб (от 0,1 до 10);
- maximum-scale — максимальное значение масштаба (от 0,1 до 10).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- page content -->
</body>
</html>В данном случае пользователь не сможет вручную масштабировать экран, а максимальный масштаб равен его фактическому значению.
Адаптивная верстка meta Viewport поддерживается не во всех версиях мобильных браузеров. Opera Mobile Mini, Symbian, Openwave и некоторые другие версии старых браузеров не реагируют на команды Viewport. В этом случае оптимизация сайта для мобильных устройств может проводиться более старым методом, а именно через метатеги:
Адаптивная верстка meta Viewport поддерживается не во всех версиях мобильных браузеров. Opera Mobile Mini, Symbian, Openwave и некоторые другие версии старых браузеров не реагируют на команды Viewport. В этом случае оптимизация сайта для мобильных устройств может проводиться более старым методом, а именно через метатеги:
Когда возникла ошибка: значение метатега viewport не задано
Данная ошибка возникает, если в HTML-коде отсутствует тег viewport, который должен управлять изменением размеров элементов на веб-странице исходя из разрешения экрана мобильного устройства.
При появлении такой ошибки настройте область просмотра, используя метатег viewport, тогда проект будет правильно отображаться на различных устройствах. Для этого опирайтесь на рекомендации, представленные в Основах адаптивного веб-дизайна.
Также может возникнуть ошибка: «В метатеге viewport должно быть значение device-width». Это происходит, если в метатеге viewport отсутствует значение device-width. В данном случае невозможно адаптировать веб-страницы под различные размеры устройств, поскольку в коде прописан viewport с фиксированной шириной. В такой ситуации нужно внедрить адаптивный дизайн и настроить масштабирования, исходя из размеров экрана.
При появлении такой ошибки настройте область просмотра, используя метатег viewport, тогда проект будет правильно отображаться на различных устройствах. Для этого опирайтесь на рекомендации, представленные в Основах адаптивного веб-дизайна.
Также может возникнуть ошибка: «В метатеге viewport должно быть значение device-width». Это происходит, если в метатеге viewport отсутствует значение device-width. В данном случае невозможно адаптировать веб-страницы под различные размеры устройств, поскольку в коде прописан viewport с фиксированной шириной. В такой ситуации нужно внедрить адаптивный дизайн и настроить масштабирования, исходя из размеров экрана.
Как проверить адаптирована ли страница под мобильные устройства
Проверка адаптации под мобильные устройства с помощью Mobile-friendly от Google
Подождите пару минут и перед вами отобразится отчет с информацией, есть ли на странице проблемы с адаптацией под мобильные устройства.
Перечень проблем, связанных с адаптацией под мобильные устройства
Заключение
Тег Viewport используется для оптимизации сайтов для мобильных устройств. Он позволяет адаптировать размер видимой области страницы к экрану устройства посетителя.
Наиболее оптимальным значением является автоматическое масштабирование ширины страницы под размер экрана. Также можно задать высоту страницы, коэффициент масштабирования, разрешить или запретить вручную увеличить/уменьшить экран, разрешить или запретить масштабирование сайта.
Для того чтобы работала адаптивная верстка meta, нужно добавить строчку с нужными параметрами в раздел Head каждой страницы сайта или установить соответствующий плагин для своей CMS.
Наиболее оптимальным значением является автоматическое масштабирование ширины страницы под размер экрана. Также можно задать высоту страницы, коэффициент масштабирования, разрешить или запретить вручную увеличить/уменьшить экран, разрешить или запретить масштабирование сайта.
Для того чтобы работала адаптивная верстка meta, нужно добавить строчку с нужными параметрами в раздел Head каждой страницы сайта или установить соответствующий плагин для своей CMS.
Эта статья — часть модуля «Аудит сайта» в Serpstat
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
| Запустить аудит сайта |
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.