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


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

(orientation : landscape)
(orientation : portrait)

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


(orientation : landscape)


 (min-aspect-ratio: 13/9) 


(orientation : portrait)


(max-aspect-ratio: 13/9)

Ahhh – success!



7 thoughts on “Android browsers, keyboards, and media queries

  1. 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.

Leave a Reply to Richard Bagnall Cancel reply

Your email address will not be published. Required fields are marked *