Media queries on retina enabled devices

问题:

Javascript tells me that my Galaxy S3 has a screen resolution of 720x1280 But the document is reported as 360x567.

Is it possible to get the document to more accurately reflect the screen resolution? Initial-scale on the viewport perhaps?

I don't seem to be able to manage it!

---

To clarify, I know my device resolution is 720px wide in portrait mode, however when putting an element on a webpage the element fills the width of the page at 360px wide because the device is using 2 hardware pixels for each css pixel. Can I stop the device from doing this?

回答1:

First, why not to use that information most of the time (from PPK at Quirksmode about devicePixelRatio)

Retina iPhones have a width of 640 physical pixels in portrait mode. Still, websites that use the meta viewport should not become 640px wide, but instead remain at 320, which is the optimal reading size for the iPhone.

Second, when you still want to target specifically high resolution devices (called Retina by Apple), you should read Cross Browser Retina/High Resolution Media Queries where the shortest snippet is:

@media 
  only screen and (-webkit-min-device-pixel-ratio: 2), 
  only screen and (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

but there are others and also links to 3 previous interesting articles and updates about Windows Phone, Opera Mini, Firefox OS and different ratios that now exist