Android Browser breaks with CSS media query on resolution

Question

It seems like the Android Browser doesn't support (and breaks when using) min-resolution in a media query. I've read a bunch of sites suggesting using it for Android so I'm a bit confused why it's breaking my site.

This works (but also works in Android Chrome which is bad for my site):

@media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.5) { ... }

This excludes Chrome, but breaks default Browser too:

@media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.5) and (min-resolution: 144dpi) { ... }

Even setting it to 1dpi has the same effect.

Any ideas?

Answer 1

There are vendor prefixes for various browsers. I've used the following example on a number of sites without issue. Not that I included a min-width conditional as well, in case you need to combine several queries:

@media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5),
   (min-width: 480px) and (-moz-min-device-pixel-ratio: 1.5),
   (min-width: 480px) and (min-device-pixel-ratio : 1.5) {
 /* ... Styles ... */
}