Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

From what I understand, Retina displays are simply a screen with a high PPI (higher than that of your eye at "optimum viewing distance"). Why, then, do applications need to fix their interface to specially support Retina displays? How is this any different from normal displays with a high PPI? Screen resolution is screen resolution, so why would it be different with Retina displays?

share|improve this question

migrated from Jan 11 '14 at 11:30

This question came from our site for user experience researchers and experts.

This question belongs on graphicdesign.SE – Vitaly Mijiritsky Jan 11 '14 at 8:59
up vote 3 down vote accepted

I think what you're referring to is the pixel density and not the resolution (even though they're related). The pixel density can be measured by counting the number of pixels in one inch. Whereas a screen resolution is the number of pixels that a screen can fit in each dimention (horizontal and vertical).

On devices with high pixel density, the browser scales the pixel dimensions of the elements so that they render as they would on a screen with a typical pixel density of 96ppi. The result is that the dimentions on your hi-ppi device are going to look very similar to those on your regular screen. That's a good thing, for the most part.

The one thing that suffers from this are raster images, such as JPEGs and PNGs, that comprise of a limited number of pixels. The result of the pixel scaling mentioned above, is that raster images are going to look blurry as if they were scaled up.

One way to get around this is to use images that are twice the size, then scale them down to half in CSS. Another way is to use vector images, that can be scaled up and down without loosing quality.

share|improve this answer
Good answer. It's worth noting, however, that not all high-PPI devices handle things the same way. Some simply act like bigger screens. One pixel of image data = one pixel on the screen. Other's re-calculate current common resolutions to be (relatively) the same physical size, but with twice the density (such as how on retina devices 1px in code = 4px on the actual device). – DA01 Jan 11 '14 at 17:33

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.