: Why do applications need to make changes for Retina displays? From what I understand, Retina displays are simply a screen with a high PPI (higher than that of your eye at "optimum viewing distance").

@YK2262411

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.

Vote Up Vote Down