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”:

(orientation : landscape)
(orientation : portrait)

To fix this, try changing your orientation checks to aspect ratio checks instead:

swap

(orientation : landscape)

for

 (min-aspect-ratio: 13/9) 

and

(orientation : portrait)

for

(max-aspect-ratio: 13/9)

Ahhh – success!

corrected_text_entry

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