Ошибки в атрибутах hreflang: какими они бывают и как исправить
Что такое метатег viewport и как он используется

SEO-специалист в Luxeo
Что означает тег Viewport?
Эта же страница на смартфоне оказывается совсем неудобной для прочтения. Вам приходится двигать изображения и текст вправо и влево, вниз и вверх. Если задать тег Viewport, веб-страница примет нормальный вид:

При адаптивном дизайне ему будет удобнее читать текст, совершать покупки и переходить между разделами сайта. Чтобы веб-страница отображалась нормально на устройствах с разным разрешением, важно задать правильные настройки тега Viewport.
Настройки тега Viewport для разных устройств

<meta name="viewport" content="width=800, initial-scale=1">
Например, возьмем для сравнения два смартфона с диагональю 3,5 дюймов, но разной плотностью пикселей. В первом этот показатель составляет до 200 пикселей, а во втором — более 300 пикселей. Одна и та же веб-страница будет выглядеть по разному на обоих смартфонах, несмотря на одинаковый размер экрана.
В первом смартфоне страница отобразится нормально и будет удобной для чтения, как на мониторе компьютера. Во втором случае из-за повышенной плотности пикселей текст отобразится в два раза мельче. Чтобы страницу привести в нормальный вид, ее масштаб необходимо увеличить в два раза. Метатег Viewport может использоваться для адаптивных и неадаптивных версий сайтов.
Еще один параметр — initial-scale — означает коэффициент масштабирования. Если указано значение «1», разрешение CSS и устройства приравниваются друг к другу независимо от размера экрана. Можно указать любое значение параметра от 0.1 до 10.
Как определить разрешение экрана конкретного устройства?
В более современном Galaxy S5 плотность пикселей составляет 441, а разрешение экрана — 1080x1920. Так как плотность более 300, нужно разделить 441 на 150, после округления получится 3. Итоговое расширение — 360x640.
Где прописать тег Viewport?
- 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>
Не все версии мобильных браузеров поддерживают тег Viewport. Opera Mobile Mini, Symbian, Openwave и некоторые другие версии старых браузеров не реагируют на команды Viewport. В этом случае оптимизация сайта для мобильных устройств может проводиться более старым методом, а именно через метатеги:

Заключение
Наиболее оптимальным значением является автоматическое масштабирование ширины страницы под размер экрана. Также можно задать высоту страницы, коэффициент масштабирования, разрешить или запретить вручную увеличить/уменьшить экран.
Для активации метатега нужно добавить строчку с нужными параметрами в раздел Head каждой страницы сайта или установить соответствующий плагин для своей CMS.

Сэкономьте время на изучении Serpstat
Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?
Оставьте заявку и мы свяжемся с вами ;)
Рекомендуемые статьи
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор Анастасия подберет материалы, которые точно помогут в работе. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Комментарии