Is there a CSS media query to determine if a keyboard is displayed on the screen?
Consider the following case: I have a website with a search icon in the header. When a user clicks that icon, a fullscreen search menu opens. This search menu contains a search form, which is both vertically and horizontally centered (in the fullscreen search menu container), so it is also centered in the screen. At the moment the user clicks the search icon, the input element is activated with jQuery (.focus).
When a user has a phone or an iPad, the keyboard is displayed on top of the content. The form is still centered vertically, but now that the keyboard covers a part of the webpage, the vertical alignment is not correct. In such cases, I want to change the top property of the search form (it has relative positioning), so that I can put the search form higher.
I already wondered if I could use @media to detect touchscreens (probably something like this), but that will not work with devices like iPads and iPhones that have a physical keyboard attached or connected via Bluetooth. Those touch devices do NOT display a keyboard on screen.
Below is an example of the problem. As you can see, the search form is partly covered by the keyboard. But when a physical keyboard is attached, I don't have the problem and the alignment is correct.
How do I vertically center the content in the visible part of the website ór detect devices where there is a keyboard displayed on screen?
