Существует ли медиа-запрос CSS, чтобы определить, отображается ли клавиатура на экране?
Рассмотрим следующий случай: у меня есть веб-сайт со значком поиска в заголовке. Когда пользователь щелкает этот значок, открывается полноэкранное меню поиска. Это меню поиска содержит форму поиска, которая центрирована как по вертикали, так и по горизонтали (в контейнере полноэкранного меню поиска), поэтому она также находится по центру экрана. В тот момент, когда пользователь щелкает значок поиска, элемент ввода активируется с помощью jQuery (.focus).
Когда у пользователя есть телефон или iPad, клавиатура отображается поверх содержимого . Форма по-прежнему центрирована по вертикали, но теперь, когда клавиатура закрывает часть веб-страницы, вертикальное выравнивание неверно. В таких случаях я хочу изменить свойство top формы поиска (она имеет относительное позиционирование), чтобы я мог разместить форму поиска выше.
Я уже задавался вопросом, могу ли я использовать @media для обнаружения сенсорных экранов (возможно, что-то вроде этого ), но это не будет работать с такими устройствами, как iPad и iPhone, к которым подключена физическая клавиатура или подключен через Bluetooth. Эти сенсорные устройства НЕ отображают клавиатуру на экране.
Ниже приведен пример проблемы. Как видите, форма поиска частично прикрыта клавиатурой. Но когда подключена физическая клавиатура, у меня нет проблемы, и выравнивание правильное.
Как мне вертикально центрировать содержимое в видимая часть веб-сайта или обнаруживать устройства, на которых отображается клавиатура?