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?
-
This question belongs on graphicdesign.SE– Vitaly MijiritskyCommented Jan 11, 2014 at 8:59
Add a comment
|
1 Answer
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.
-
1Good 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).– DA01Commented Jan 11, 2014 at 17:33