Viewport – это область видимой части веб-страницы в браузере пользователя.
🟠`meta viewport` – ключ для адаптивного дизайна
Чтобы страница корректно отображалась на мобильных устройствах, используется мета-тег
viewport: <meta name="viewport" content="width=device-width, initial-scale=1">
🟠Проблема без `meta viewport` (почему он нужен?)
Без
viewport (по умолчанию)На мобильных браузерах страницы загружаются как на ПК, но уменьшаются. Пользователям приходится зумить и скроллить.
🟠Дополнительные параметры `meta viewport`
Управление масштабом
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Отключение адаптации iOS Safari
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Ставь 👍 и забирай 📚 Базу знаний