I have a Samsung Galaxy S3 Android Version 2.3 and am trying to change some media queries for it. I am using this:
@media only screen and (-webkit-device-pixel-ratio: 2) {}
Which seems to be working for Chrome on Android, but not the native Android Browser. I've looked at what would target this browser and it says 360px W, 567px H, -webkit-pixel-ratio:2, but it is not working. Does anyone know how to get this browser to behave?
Try setting the pixel ratio to 1.5. I haven't actually tested this, however, it looks like the density may actually be 1.5 for hdpi devices (hdpi is 240dpi so it has a 1.5 pixel density over mdli, the baseline, which is 160dpi).
@media only screen and (-webkit-device-pixel-ratio: 1.5) {}
If this turns out to be correct, perhaps the core browser is just being stricter than Chrome and requiring you to enter the exact value.
The following article has a bit more detail: http://developer.android.com/guide/webapps/targeting.html
I'm assuming the S3 uses hdpi graphics but if this is incorrect, the following Stack Overflow has a more complete list of pixel densities (Google's article is a little old so only goes up to hdpi): Android screen sizes in Pixels for ldpi, mdpi, hpdi?
