Генератор meta viewport
Создавайте правильные meta viewport теги для адаптивного веб-дизайна. Настройте параметры масштабирования и видите результат на устройствах iPhone, iPad и Android.
Сгенерированный тег
<meta name="viewport" content="width=device-width, initial-scale=1.0">Предустановки
Предпросмотр на устройствах
iPhone 14 Pro
Мой сайт
Содержимое адаптируется согласно viewport тегу.
390 × 844 px
iPad Pro
Мой сайт
Содержимое адаптируется согласно viewport тегу.
1024 × 1366 px
Samsung Galaxy S24
Мой сайт
Содержимое адаптируется согласно viewport тегу.
360 × 800 px
Визуальная демонстрация масштаба
Блок ниже масштабируется согласно параметру initial-scale:
100%
Текущий масштаб: 100%
Справочник параметров
| Параметр | Значения | Описание | Поддержка |
|---|---|---|---|
| width | device-width, число (px) | Ширина вьюпорта. device-width адаптируется к размеру экрана устройства | Все |
| initial-scale | 0.1 — 10 | Масштаб при загрузке (1.0 = 100%, без масштабирования) | Все |
| minimum-scale | 0.1 — 3 | Минимальный уровень масштабирования при зуме (по умолчанию 0.25) | Все |
| maximum-scale | 0.1 — 10 | Максимальный уровень масштабирования при зуме (по умолчанию 10) | Все |
| user-scalable | yes, no | Разрешить ли пользователю масштабировать (зумировать) страницу | Все |
| viewport-fit | auto, contain, cover | Как контент располагается относительно безопасной зоны (iPhone notch) | iOS 11+ |
| interactive-widget | resizes-visual, resizes-content, overlays-content | Как виртуальная клавиатура влияет на контент (экспериментально) | Chromium |
Рекомендации
Адаптивный дизайн
Используйте device-width с initial-scale=1 для всех современных адаптивных сайтов
Разрешить масштабирование
Всегда оставляйте user-scalable=yes или не указывайте параметр вообще для лучшей доступности
iPhone notch
Используйте viewport-fit=cover только если ваш дизайн учитывает вырез на iPhone
Фиксированная ширина
Избегайте фиксированной ширины (например, width=980) для мобильных устройств
Всё в браузере
Данные не загружаются
Бесплатно