Media Query for Android Devices

问题:

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.

回答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.

回答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.

回答3:

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.

回答4:

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

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