Media Query for Android Devices

Question

I have my site optimized for OS and iOS, but testing it for Android through browserstack.com has left me puzzled about targeting Android devices in my media queries.

Here is my query that works for iOS devices:

#using em based query after reading this article: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
@media only screen and (device-width: 20em)

I have tried a variety of different queries (including px based queries), but just want one that will work for all / most handheld android devices. Have you had any luck with this? Thanks for your ideas.

Answer 1

Media queries can't be used to find device type, you should use user agent sniffing for this. There is a good resource for media queries on CSS-Tricks though.

Answer 2

Please have look into the demo at http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

It seems like device-width: 20em would cause some problems. So have look here.

Answer 3

if you want to target Android using media queries, I think you can fake it by querying dpi.

@media screen and (min-resolution: 192dpi) { … }

Answer 4

Assuming your 1em = 16px I would use the below media query

@media only screen and (min-device-width: 20em) and (max-device-width: 30em)

That would look for any screen device whose width is between 320px and 480px, which is a fairly good standard for mobile devices.