@Andy_Francev
Frontend Developer

Как узнать высоту клавиатуры и нижнего бара на iOS Safari?

Добрый день, коллеги!
Пытаюсь адаптивно сверстать сайт, но столкнулся с тем, что не понимаю, как узнать высоту клавиатуры и нижнего бара на iOS Safari. С Хромом на Android проблем нет -- высота вьюпорта пересчитывается, когда клавиатура на экране. А Safari почему-то так не хочет, и мой контент уезжает под клавиатуру или нижний бар.
Что делать? Как узнать их высоту? Захардкодить -- не вариант, увы.
  • Вопрос задан
  • 1574 просмотра
Пригласить эксперта
Ответы на вопрос 1
@BelkinVadim
Frontend разработчик
Сам мучался с этой проблемой. На iOS клавиатура никак не влияет на размер окна и вьюпорт. Она просто открывается поверх окна и страницу при этом может как бы проскроллить вверх если место куда вводится текст находится в том месте где появится клавиатура. Причем скроллится на страница (html, body теги), а фиг знает что, т.к. событие скролла не отлавливалось.
Пришлось выкручиваться так, я отлавливал событие фокус на полях ввода (вообще на всем что вызывает открытие клавиатуры), и по setTimeout в 500ms (клавиатура появлялась плавно и можно было правильно вычислить её размер только после открытия) выполнял следующее
const innerHeight = window.innerHeight;
document.body.style.height = innerHeight + 'px';
document.documentElement.style.height = innerHeight + 'px';
window.scrollTo(0, 0); // вообще по-хорошему тут к нужному элементу нужно скроллить, нули я для примера поставил


решение не вау, и еще таймаут подводит если вдруг интерфейс тормознет и клавиатура появится с чуть большей задержкой, но другого к сожалению не придумал

Ну и соответственно при закрытии клавиатуры (blur того же поля) нужно примененные стили сбрасывать
document.body.style.height = '';
document.documentElement.style.height = '';
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы