Pixel density, retina display and font-size in CSS

Question

I don't have a Retina MacBook myself to test these things out, and there seems to be a lot of confusion on the internet about web design on high pixel density displays.

Now, I assume that WebKit on a MacBook with Retina display scales the page about twice it's size as most web pages are not built to adapt to the higher pixel density?

In my view the ideal case when designing for these, or actually any type of display is to use ems instead of pixels as you could just do;

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body { font-size: 150%; }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
    body { font-size: 200%; }
}

and the whole page would scale accordingly. Or would it? Is the default font-size on browsers running on Retina MacBooks still 16px or is it higher? Because if it's higher, the scaling effect would multiply.

I guess my question is; if I use ems consistently, the only thing I should need to do is to change the font-size for every device-pixel-ratio?

Answer 1

OK, this is a pretty serious misunderstanding (which is cool! :) ), so here's a brief explanation of what you might want to do.

Firstly, any recent iPhone/iPod/iPad or many Android phones have Hi DPI screens, so you might already have something to test with. If not, and you are doing this professionally, just buy a 4G iPod Touch.

In terms of how it works, for 99% of stuff, you need do nothing. If it worked how you suggested, then most websites would be a quarter of the size they should be, and the internet would be broken.

For fonts, SVG, CSS box shadows, gradients and any other CSS drawn stuff, it's all good. Those things look awesome without any extra work. (Hence why we've been pushing towards everything in CSS for a while.)

For bitmaps (i.e. pngs, jpgs, gifs), all you need to do is provide the image with 2x the resolution, but size it the same as normal.

As an example, if your page had an image that was 100px by 100px, you'd provide an image that was 200px by 200px, but specify in CSS or as an attribute in HTML that it is 100px by 100px.

The reason this works is that a pixel on the screen is not the same as a CSS pixel. This is a good thing, because otherwise as I say, things would be tiny.

I guess that in hindsight, it might have been better to call the px unit in CSS something different, like a dot or something, but there you go.

You'll sometimes see references to device independent pixels, which is the difference between the CSS px, and the real pixel on the screen.

Answer 2

The Retina display doesn't double the size of the element. It only effects images on the web.

For each "web pixel" in an image it requires 4 (I think) "screen pixels" so images are stretched to fill these extra pixel spaces, making them look less crisp on a retina display. Images should be exported at a higher DPI and served to Retina displays via media queries or Javascript.

Text, CSS effects, Canvas, SVG Vectors etc are not directly effected by the retina display.