Re: [mediaqueries] resolution and device-pixel-ratio

On Fri, Nov 22, 2013 at 7:06 PM, Maciej Stachowiak <> wrote:

> (1) Most content using devicePixelRatio was originally created with iOS in
> mind, and therefore would not expect the page zoom to be factored in, since
> on iOS there is no page zoom.

Indeed, most content (even for desktop) doesn't take into account page zoom
(because browsers have traditionally made it impossible to observe). That's
why factoring it into the devicePixelRatio works so well, because without
the author even having to think about it, their DPI-aware content now
magically remains crisp at non-default page zooms.

On Fri, Nov 22, 2013 at 7:57 PM, Maciej Stachowiak <> wrote:

> On Nov 22, 2013, at 11:43 AM, Rik Cabanier <> wrote:
> For instance, if zoom is 110%, devicepixelratio becomes 1.1.
> If you have a canvas of 1000x1000 css pixels, you will need to set a
> backing store of 1100x1100 pixels and apply a scale of (1.1, 1.1)
> I'm pretty sure canvas authors do not actually want that. They'd often
> prefer to have the backing store be an integer ratio of their preferred
> size.

Exactly - and that's not possible in Safari. Consider a fullscreen canvas
game, displayed at page zoom of 125% on a 1dppx 1280 physical pixel wide
screen. The page and hence canvas will be shrunk to a width of 1280/1.25 =
1024 CSS px. In Safari, the game will multiply the canvas CSS width, 1024,
by the devicePixelRatio of 1, and end up making a 1024 canvas pixel wide
backing store. This will not be crisp, as it is a non-integer multiple of
the number of physical screen pixels used to display it. In
IE/Firefox/Chrome, the devicePixelRatio will be 1.25 and so the game will
make a 1024*1.25 = 1280 canvas pixel wide backing store, and the game will
render crisply.

Received on Friday, 22 November 2013 21:11:54 UTC