Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

interactive-widget в viewport: клавиатура не ломает 100vh

resizes-content vs overlays-content на Android.

Изображение статьи: interactive-widget в viewport: клавиатура не ломает 100vh

В meta viewport значение interactive-widget=resizes-content уменьшает layout viewport при появлении виртуальной клавиатуры — поле ввода не прячется под клавиатуру.

overlays-content оставляет полный viewport — выбирайте осознанно для чат-виджетов vs форм заявки.

- [viewport meta — MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) — interactive-widget.

- [Control the Viewport — Chrome Developers](https://developer.chrome.com/blog/viewport-resize-behavior) — Поведение клавиатуры.

---

## dvh

Сочетайте с min-height: 100dvh — meta и dvh решают разные части проблемы mobile viewport.

#HTML#мобильный#формы

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.