Developers › ODIN blog

devicePixelRatio in Opera Mobile

July 5, 2012 · by Patrick H. Lauke

I've been enjoying PPK's recent look at devicePixelRatio and More about devicePixelRatio, but one detail in the latter post caught my eye: discussing the devicePixelRatio on the Galaxy Nexus, he notes that Opera Mobile goes for a ratio of 2.25, while other browser use a ratio of 2.

By default, the devicePixelRatio in Opera Mobile is determined by the device's reported resolution:

Resolution devicePixelRatio
< 170dpi 1
170-200dpi 1.25
200-260dpi 1.5
260-280dpi 1.75
280-320dpi 2
> 320dpi 2.25

Now, the Galaxy Nexus has a nominal resolution of 316dpi, so it should actually end up with a devicePixelRatio of 2...but perhaps the OS is reporting it as 320dpi, triggering the slightly higher ratio.

Opera Mobile's Zoom settings

One aspect that seems to be unique to Opera Mobile, however, is that users can change the devicePixelRatio through the Zoom preference in the browser's Settings.

On regular (non-mobile-optimised) sites, this setting affects how closely the browser zooms into the page when double-tapping. At the same time, though, changing this setting also changes the devicePixelRatio, to make this preference more effective on mobile-optimised sites. For instance, setting the preference to 175% globally sets the devicePixelRatio to 1.75. This will obviously have an effect on sites that use viewport meta to set things like width=device-width and sites that use pixel-ratio-specific Media Queries, as the reported values will now be different.

Note that this global Zoom setting is different from a user's normal zoom/pinch-zoom action – in those situations, devicePixelRatio doesn't change.

Readers' comments 3

Left under the original article, as archived.

  • JurjenTuesday, July 10, 2012 9:00:40 PM

    Its great to see this devicePixelRatio works so well already. Now the challenge is for the web-designers/-developers to return something pretty for each and every device, not an easy task these days.
  • Rhys JacksonSunday, July 22, 2012 5:03:49 PM

    Originally posted by jekav:

    Its great to see this devicePixelRatio works so well already. Now the challenge is for the web-designers/-developers to return something pretty for each and every device, not an easy task these days.



    Check These Out

    :bigeyes: :yuck: :bigeyes: :idea: :beer: :wine: :star: :sing: :coffee: :down: :up: :up: :no: :spock: :jester: :yikes: :smile: :sad: :knockout: :no: :chef: :troll: :psmurf: :up: :left: :o: :bigsmile: :right: :down: :smurf: :troll: :bandit: :pirate: :coffee: :angel: :p:
  • JurjenSunday, July 22, 2012 7:36:41 PM

    Yes, aren't they pretty?! There are even more you know... :scared:

About this article

Published inODIN blog
DateJuly 5, 2012
AuthorPatrick H. Lauke
OriginalInternet Archive