Retina Display introduced by Apple for liquid crystal display (LCD) for too high pixel density. Its means your visitors will be looking at your site on a high-resolution screen with a whopping 3.1 million pixels.Yes…
Apple Says for Retina Display.
Text in books, web pages, and email is crisp at any size. Images in movies and photos are stunning at almost any angle. That’s because the Retina display’s pixel density is so high, your eye is unable to distinguish individual pixels.
In a word, resolutionary.
By developing pixels a mere 78 micrometers wide, Apple engineers were able to pack four times the number of pixels into the same 3.5-inch (diagonal) screen found on earlier iPhone models. The resulting pixel density of iPhone 4 — 326 pixels per inch — makes text and graphics look smooth and continuous at any size.
The term is used for several Apple products, including the iPhone, iPod Touch, i Pad, and Mac Book Pro. As the typical viewing distance would be different depending on each device’s usage, the pixels per inch claimed to be of retina quality can be different depending on the size of the display, with higher ppi for smaller displays and lower ppi for larger displays: 326 ppi for the smallest devices (iPhone and iPod Touch), 264 ppi for mid-sized devices (iPad) and 220 ppi for larger devices (MacBook Pro).
So are they right? Or is this just another way for Apple marketing to get us to buy a shiny thing?
The maximum spatial resolution (ability to differentiate two points) of the human eye occurs at the center of the visual field, corresponding to the fovea of the retina. At the fovea, the cone cells (there are no rods in the fovea) are jammed up close together at the highest density of the retina. Knowing this we can calculate the smallest pixels the fovea should be able to differentiate, but it takes a couple assumptions that we will lay out. The reader is encouraged to re-calculate the following based on their affinity for Apple.
Still, screens are only going to continue getting better with ever-increasing pixel density. Now is the time, if you haven’t already, to start embracing CSS 3 (avoid images altogether with gradients, shadows and rounded corners in CSS 3), Scalable Vector Graphics (SVG) for resolution independent graphics and of course @media queries to serve high-res background images.