26

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?

rtruszk
  • 3,902
  • 13
  • 36
  • 53
  • Not sure tbh but I noticed this article on SM today which might be of use: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ – Billy Moat Aug 21 '12 at 15:49
  • 1
    I think the proposed approach is correct. Here is an excellent article on this topic: http://alistapart.com/article/a-pixel-identity-crisis – jogo Feb 12 '13 at 17:55

2 Answers2

54

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.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • 1
    So, if I specify a `font-size` of `16px`, a browser with a high/low density display will adjust it to an appropriate size? – Marco Scannadinari May 29 '14 at 12:26
  • 2
    Yes. Technical a screen with a devicePixelRatio of 2 will draw it as if it's 32px, but as the pixels have half the width and height, it will appear as 16px but with more detail. The only thing you should manually do is include higher res images. – Rich Bradshaw May 29 '14 at 12:29
  • OK, thanks. So does this imply that there is a 'standard' pixel density? – Marco Scannadinari May 29 '14 at 12:42
  • 1
    Well, the traditional route has been that 1 CSS px = 1 physical pixel. I guess you could say that is standard. More formally, there is the concept of a reference pixel (http://www.w3.org/TR/css3-values/#reference-pixel), though, this isn't really relevant in day to day usage. – Rich Bradshaw May 29 '14 at 12:45
  • Yes I am aware that at 100% zoom, one CSS pixel would presumably equal one device pixel, however you said a device with a pixel ratio of 2 would usually double the font-size to compensate. But the ratio of 2 is in comparison to what? 96dpi? – Marco Scannadinari May 29 '14 at 15:55
  • I'm not sure I fully understand the question - the 2 means that each CSS pixel is drawn using 2^2 device pixels. DPI depends on the device - a 52" TV, a 21" screen and a 5" phone can all be 1080p whilst having different dpis - there isn't a standard DPI. – Rich Bradshaw May 29 '14 at 16:02
  • Sorry, in a more basic form, what I'm really trying to ask is, what does a pixel ratio of 1 equate to? – Marco Scannadinari May 29 '14 at 21:05
  • 1
    Each CSS pixel is drawn using exactly 1 device pixel. – Rich Bradshaw May 30 '14 at 07:42
4

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.

ChazUK
  • 744
  • 4
  • 26
  • How is this possible? If I tell the browser to render a font at 16 pixels, it should be 16 pixels across all screens? The only reasons not to would be if Apple makes some correction of this to still make old pages browsable. –  Aug 21 '12 at 18:26
  • 7
    Pixels used to match 1 = 1, but now there's device pixels, image pixels, css pixels. Here's a great presentation on High-Res displays and the web https://dl.dropbox.com/u/75469230/responding-to-the-hi-res-web/index.html#/15 – ChazUK Aug 22 '12 at 10:39