Как определить размеры клавиатуры iOS в Mobile Safari

Question

В настоящее время я пытаюсь создать интерфейс для предложений на веб-странице, ориентированной на Mobile Safari.Основными компонентами являются текстовое поле и список прокрутки, который отображается под текстовым полем, содержащим список предложений.

Для этого мне нужно: 1) определить, что клавиатура показала, и 2) определить ее размер, чтобы изменить размер списка предложений, чтобы он поместился в доступном пространстве.

I 'мы смогли выполнить (1), ожидая события фокуса, но (2) все еще проблематично.Мне не удалось найти какой-либо способ измерить размер клавиатуры, поскольку она, кажется, не влияет на размеры окна или что-либо еще, что я мог бы попытаться измерить.

Есть ли в любом случае программноопределить размер клавиатуры iOS при ее отображении в мобильном сафари?

Answer 1

К сожалению, нет способа рассчитать высоту клавиатуры. Ни одно из свойств окна не изменяется, когда клавиатура появляется.

Чтобы определить, что клавиатура показывает, вы можете использовать это решение: iPad Web App: обнаружение виртуальной клавиатуры с помощью JavaScript в Safari?

Затем вам нужно добавить класс, специфичный для устройства, и использовать медиазапросы в вашем CSS вместе с этими классами, чтобы стилизовать их соответствующим образом для устройства и ориентации.

Если у кого-то есть лучший взлом, я бы очень хотел услышать об этом.

Answer 2

Нет свойства сообщать вам размер клавиатуры, но вы можете рассчитать его, просто измерив top.innerHeight до и после появления клавиатуры.

Хорошая новость заключается в том, что это справедливо как для iOS, так и для Android.