<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
При сравнении мобильных и десктопных браузеров наиболее очевидное различие — размер экрана. Мобильные браузеры по-умолчанию отображают сайты, созданные для обычных десктопных браузеров, гораздо хуже, чем могли бы: либо путем уменьшения масштаба, делая текст и другой контент слишком мелким и нечитаемым, либо отображая лишь небольшую часть сайта, которая умещается на экране.
viewport - это важнейший META тэг для разработчика мобильных сайтов. Впервые он появился на браузерах Айфонов, но теперь применяется практически повсеместно на мобильных дивайсах. Посему, если делаете что-то для устройств с маленькими экранами, данный тэг НАДО применять.
У тэга есть много возможных атрибутов, но в примере я указал самые важные (на мой взгляд).
Давайте рассмотрим их подробнее:
content="width=device-width
Данный параметр указывает, что контент сайта надо подогнать под ширину экрана
initial-scale=1.0
Мы указывает, что изначально не надо ничего масштабировать, браузер покажет Ваш сайт "как есть"
maximum-scale=2.0
Это необязательный атрибут. Указывает, насколько максимально можно масштабировать страницу.
user-scalable=yes"
Указывает, что пользователь может сам менять масштаб (на сенсорных дивайсах - пальцами). Многие в настройках запрещают масштабирование, однако я считаю это плохой практикой. К примеру: у человека плохое зрение и он хочет рассмотреть что-то подробнее, зачем ему это запрещать?
Остальные параметры тэга viewport Вы можете накопать в инете, но это уже несущественно, они не оказывают решающего влияния на отображение сайта.
ИТОГ: ОБЯЗАТЕЛЬНО ставим.
© 2026, JohnCMS