window.pixelRatio not working in Opera. Any alternative?

Question

I have been working on making our CMS export valid content for mobile devices. One of the problems we encountered was that newer devices, like the iphone4 have a higher resolution display so we needed to find a way to render the same page correctly on older devices and newer that use a 300dpi display. So far we used javascript and window.devicePixelRatio in order to get the dpi resolution, but it turns out this is not working in opera(?) and opera mobile.

Any suggestetions or maybe a defferent approach? I researched a bit but was unable to find somethig.

Thanks

Pole

Answer 1

I think you might misunderstand what devicePixelRatio is really telling you — surprise, a pixel is not a pixel!

When you specify a pixel size in CSS, you're not necessarily specifying a size in physical pixels. Instead the CSS px unit is actually a "device-independent pixel" (DIP), which is relative to the device's DPI:

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.

The reference pixel is defined as 96dpi (Windows' default DPI setting), so on your computer, it is true that 1 DIP (CSS px) = 1 physical screen pixel. Additionally, even though older iOS devices have a physical DPI of 163, they still use 1 DIP = 1 pixel. However, on iPhone 4's doubled resolution of 326 DPI, 1 DIP = 2 screen pixels, which is what devicePixelRatio = 2 is telling you.

Thus, speaking strictly of the difference between the iPhone 3 and iPhone 4, a HTML element with the style { width:100px; height:100px; } should render at roughly the same size on older devices and on the higher-DPI iPhone 4 since it rescales the pixel values.

So there is no reason you sould have to use script to account for high-DPI devices; it should just work.

Cyclograph

I get your point, but how to you handle other elements like text, buttons, graphics etc. I mean, a 16px font looks fine on a 100 or so dpi display, but it is tiny on a 300dpi display. – Pole

All else being equal, something with font-size:16px; should look the same on the 326dpi screen as the 163dpi screen due to the pixel scaling I talked about. I'm now going to make a wild guess at what you're experiencing, so let me know if I'm right: you are seeing small text on the 326dpi screen because you have declared <meta name="viewport" width="device-width">, and device-width frustratingly enough reports physical pixels, not CSS DIPs. Try <meta name="viewport" width="320">. – Cyclograph

Actually I haven't used the viewport meta at all. Let me try what you suggest. – Pole

@josh: <meta name="viewport" width="device-width"> should always be sized in CSS pixels (i.e. dips); what device are you using? You might be confusing it with device-width in media queries, which unfortunately currently uses physical pixels on Android, though this should change as it disagrees with the spec. [TL;DR]: Always use <meta name="viewport" width="device-width"> instead of <meta name="viewport" width="320"> unless your design really relies on fixed width and you're willing for it to be excessively zoomed in when viewed in landscape. – Ratter

@John, you're right that device-width uses CSS DIPs, and should be preferred over an absolute value. – Cyclograph

Answer 2

Opera Mobile doesn't have devicePixelRatio yet as it is pretty much a none-standard extension added by Apple. We are considering adding this however, and may be in the next release of Opera Mobile if we do. You don't need to use JS for this however. It should work in a Media Query too with device-pixel-ratio (with vendor prefixes).

Purser

It would be great, detecting a devices screen DPI resolution can be helpful, as I had to find out in case of the Iphone4. – Pole

@ dstorey -webkit-min-device-pixel-ratio media query doesn't work in opera mobile (9.5); and isn't supported in ios3 either. I'd like to see a table which browsers support that property! The opera css3 support list doesn't show it... ( opera.com/docs/specs/opera95/css ) – Caryloncaryn

@dstorey Any word on whether .devicePixelRatio has been added to Opera Mobile? – Kaz

Yes it is, with the -o- prefix. See dev.opera.com/articles/view/… – Purser

Answer 3

HI all,

josh3736 gave a very nice and concise answer to the css vs device pixel issue. Just wanted to add that it does seem to be an issue with large, high definition images which may need to be served more specifically for individual dpi or ppi device spec's. Searching google, I found that others are (attempting to?) using the device-pixel-ratio as a base to resize images smaller for high ppi displays, while keeping the original high def. image available for these devices and providing low def. images for mobiles without high dpi displays. That way the image is of higher quality for these devices, yet looks sized the same relative to the rest of the page across the spectrum of user devices.

The ability to zoom seems to make this more useful I gather, since a user can zoom in on high def. images and get increased detail. Of coarse this does add another layer of complexity to deal with, but it may be important to address as we have more and more new high end devices entering the markets. Still looking into this, so post back if anyone has good examples.

Cognition