If you have a site that is intended to be mobile friendly, is reasonably responsive (in a media-query-stylee) and has user input areas, you may find this issue on Android due to how the keyboard interacts with the screen:
Nice text input area
Oh noes! Screen gone wrong!
It turns out that on Android devices the keyboard doesn’t overlay the screen, but actually resizes the screen; this can cause your media queries to kick in, especially if you use “orientation”:
[css]
(orientation : landscape)
[/css]
[css]
(orientation : portrait)
[/css]
To fix this, try changing your orientation checks to aspect ratio checks instead:
swap
[css](orientation : landscape)[/css]
for
[css] (min-aspect-ratio: 13/9) [/css]
and
[css](orientation : portrait)[/css]
for
[css](max-aspect-ratio: 13/9)[/css]
Ahhh – success!
Reference http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/
Hello Robin,
I’m a mobile software developer.
Some months ago I applied this technique with success in my sites after several trials. Now, it does not work with LG phones (Nexus 5, LG G2 ecc…)
Any suggest?
Thank you in advance.
Giovanni
I’d try playing with the exact aspect ratio; instead of 13:9 try 13:10 or 12:9; you can calculate this from a screengrab of the page when the keyboard is overlayed.
Did anyone find a suitable ratio to cover all devices?
After much trial and error, I found 121/80 to work quite well.
Thank you very much for this! Exactly the piece of code I was looking for!
Why not use max-aspect-ratio: 1/1 ? That seems closer
Thanks a lot for the solution. You saved me many hours of work !