Contributor: Mehreen Chowdhury, Marketing Executive, Nascenia
Apple came up with a unique trend called Retina display. It’s actually a marketing term developed by Apple. Retina display is used for liquid crystal displays. It has a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance. It’s a brand name of Apple. This term is used for several Apple products like iPhone, iPad, iPad Mini, iPad Air, MacBook Pro etc.
Retina display is better than the normal display because of its high resolution. People will find the better-quality screens that are more clear, sharper, more colorful and brighter. Basically, it depends on screen resolution. If we consider iPad 1 and iPad 2, both have a resolution of 1,024 x 768 pixels and a pixel density of 132 ppi (pixels per inch) with 2,048 x 1536 pixels at 264 ppi on the Retina-class iPads we can say, the pixel density is twice as high.
Here you can see the popularity of using Retina display over the time in the Google trend (see screenshot below).
The use of Retina display over the time
The difference between Normal & Retina display
Here we zoom in a text on MacBook Pro (See the right image below); it shows the clear text on Retina display only because of its high resolution. The one on the left is normal screen and it is blur. So the noticeable advantage of the Retina display is a sharper image.
Retina display has a better quality screen than normal display
Go ahead and watch the video to see the difference between normal and retina display.
Example
Here you can see an example of writing media query in Retina Display. This is assigned two image formats: a .png image for normal screen resolution and an SVG for the HD screen.
a {
background-image: url('img/hongkiatcom.png');
background-size: 100%;
background-repeat: no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and ( min--moz-device-pixel-ratio: 1.5),
only screen and ( -o-min-device-pixel-ratio: 3/2),
only screen and ( min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 192dpi)
{
a {
width: 100%;
background-image: url('img/hongkiatcom.svg');
background-size: 100%;
background-repeat: no-repeat;
}
}
It is quite commendable that Apple is the first one who introduces the better resolution images and got the success to add greater value to its products. Retina Display is far better than a normal screen display, what do you think?
