3

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
  • Could yo clarify a bit? Is your page only filling part of the screen on that device?
    – ralph.m
    May 9, 2013 at 10:35

1 Answer 1

4

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

2
  • I think I'm beginning to understand a little better now. High resolution isn't for developers to claw back more real estate, its to make the real estate look better on the device!
    – michael
    May 10, 2013 at 9:04
  • Yes, now physical pixels are (can be) unrelated to virtual pixels the browser want the webdev to see. From the vendor point of view, they provide better screen to user while ensuring compatibility with 99.99% of websites without any modification. Same story (just more and more complicated) since the first iPhone that chose to ignore the handheld media (taken into account by 0.1% of sites) and let the world know its screen was 960 or 980px wide. Sort of. And had to do the hard work websites would never do.
    – FelipeAls
    May 10, 2013 at 9:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.