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

Question

[Андрей безфамилии]

Добрый день, коллеги!
Пытаюсь адаптивно сверстать сайт, но столкнулся с тем, что не понимаю, как узнать высоту клавиатуры и нижнего бара на iOS Safari. С Хромом на Android проблем нет -- высота вьюпорта пересчитывается, когда клавиатура на экране. А Safari почему-то так не хочет, и мой контент уезжает под клавиатуру или нижний бар.
Что делать? Как узнать их высоту? Захардкодить -- не вариант, увы.

Comments

[Дмитрий Локшин]

Решили данную проблему?

[Андрей безфамилии]

нет, поменяли макет и поведение, чтобы избежать подобного поведения

Answer 1

[Вадим Белкин]

Сам мучался с этой проблемой. На 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 = '';