How do chrome apps look on high dpi screens?

Question

So, how do they look? Tiny? Does chrome/the OS scale them up? I'd like to publish an app but I don't have a high dpi screen to test this things out and I'm really curious about it.

If they in fact look tiny, would a device-pixel-ratio media query that sets the html font-size fix it? All my units are set in rems, no images and only a few text.

Answer 1

Chrome apps generally look great on high-DPI screens -- just as Chrome itself does.

Even if your CSS specifies all dimensions in px, those are CSS pixels, and adapt to the display based on the device-pixel-ratio.

With rems, and no images, your app should look much better on a high-DPI display than on a standard one.

Low-DPI Images on a high-DPI screen can look pixellated -- not because they are tiny, but because they have been scaled up, and they are being presented beside crisply rendered text. For those cases, there are techniques that you can use to present high-resolution images to those displays, and standard images to others.

The other issue to be aware of is drawing with a <canvas> -- if you want a sharp image, you have to remember to scale the canvas area by device-pixel-ratio, and scale up all of your coordinates the same way as you draw.