Android browsers, keyboards, and media queries

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

portrait_text_entry

Oh noes! Screen gone wrong!

confused_orientation_text_entry

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!

corrected_text_entry

Reference http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/