What is a Retina Display?
Apple introduced its series of OLED and LCDs a couple of years ago. These displays have a higher density compared to traditional displays. Apple named these displays “Retina display”. It has 4 times more physical pixels than the normal display in the same amount of space. The limit of the human retina to differentiate the pixels is 300 pixels per inch whereas the retina display has 326 pixels per inch. It is mainly dependent on two factors: pixel density & distance between the human eye and the screen display. According to Apple’s opinion, if the user is observing the device screen at a normal distance, it is very sharp and accurate that you cannot see the individual pixels anymore.
Mainly Retina display is measured by two units: PPI and DPI.
What is PPI (Pixels per inch)?
Whenever you are working with digital images, the first thing that arrives in your mind is the resolution of an image in pixels, and there the term PPI came into existence. PPI, i.e., Pixels per inch is an additive color model that describes a computer display’s resolution. The higher resolution results in higher PPI. More PPI results in a better quality of an image. The industry considers 300 PPI as the standard quality of an image. It is an RGB color model where each pixel consists of its subpixel.
Every pixel contains its subpixel
Describes dimensions of an image
How to calculate PPI?
- Calculate the diagonal resolution using Pythagoras theorem in pixels:
- Then, calculate PPI:
What is DPI(Dots Per Inch)?
DPI, i.e., Dots per inch, measures the number of ink dots that fit in an inch of a printed image. It is a subtractive color model that refers to a physical printer’s resolution value. When you increase the DPI, the size of the printed image decreases, and vice versa. Every screen comprises 72/96 dpi, but in the real scenario, printed documents contain higher dpi than usual.
To target devices that support DPI, we need to write specific media queries. Below is the example of a Retina display for the background image in iPhone 6, 6S, 7 and 8:
Example of Retina Media query
Html code:
<html>
<body>
<div class="retina-block"></div>
</body>
</html>
Css code:
.retina-block { background: url(../images/retina.png) no-repeat center center / cover; width: 150px; height: 150px;}Responsive media query:
Simple 1x background image:
Retina display media query for iPhone 6, 6S, 7 and 8:
@media
( min-device-width: 375px) and
( max-device-width: 667px) and
( -webkit-max-device-pixel-ratio: 2),
( max--moz-device-pixel-ratio: 2),
( -o-max-device-pixel-ratio: 2/1),
( max-device-pixel-ratio: 2) and
( max-resolution: 192dpi) and
( max-resolution: 2dppx) {
.retina-block { background-image: url(../images/retina_2x.png);} }
Retina 2x background image:
The above-shown 1x image is the normal image, and the retina image is 2times(2x) (i.e., double the resolution of the 1x image to achieve a pixel perfect image as the 1x will appear to be blurry to the human eye.)
Device Pixel Ratio
The Ratio between physical and logical pixels is classified as the Device pixel ratio(DPR).
For example:
In iPhone 8, the device pixel ratio is 2, since the logical linear resolution is always half of the physical linear resolution.
Physical resolution: 750 x 1334
Logical resolution: 375 x 667
In Apple devices default device pixel ratio is 1 and maximum device pixel ratio is 3.
In the above example the units, dpi(Dots per inch), and dppx(Dots per pixel) are used for maximum resolution.
1dppx and 1Dpr is equivalent to 96dpi.
Also, 2dppx and 2Dpr is equivalent to 192(96*2)dpi and so on.
Media queries for all Apple devices:
Retina display media query for macOS with device pixel ratio 1:
@media
( min-width: 992px) and
( -webkit-max-device-pixel-ratio: 1),
( max--moz-device-pixel-ratio: 1),
( -o-max-device-pixel-ratio: 1/1),
( max-device-pixel-ratio: 1) and
( max-resolution: 96dpi) and
( max-resolution: 1dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPad 1, 2, Mini and Air:
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1),
( max--moz-device-pixel-ratio: 1),
( -o-max-device-pixel-ratio: 1),
( max-device-pixel-ratio: 1) and
( max-resolution: 96dpi) and
( max-resolution: 1dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPad 3, 4, 5 and Pro 9.7:
@media
( min-device-width: 768px) and
( max-device-width: 1024px) and
( -webkit-max-device-pixel-ratio: 2),
( max--moz-device-pixel-ratio: 2),
( -o-max-device-pixel-ratio: 2/1),
( max-device-pixel-ratio: 2) and
( max-resolution: 192dpi) and
( max-resolution: 2dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPad Pro 10.5:
@media
( min-device-width: 834px) and
( max-device-width: 1112px) and
( -webkit-max-device-pixel-ratio: 2),
( max--moz-device-pixel-ratio: 2),
( -o-max-device-pixel-ratio: 2/1),
( max-device-pixel-ratio: 2) and
( max-resolution: 192dpi) and
( max-resolution: 2dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPad Pro 12.9:
@media
( min-device-width: 1024px) and
( max-device-width: 1366px) and
( -webkit-max-device-pixel-ratio: 2),
( max--moz-device-pixel-ratio: 2),
( -o-max-device-pixel-ratio: 2/1),
( max-device-pixel-ratio: 2) and
( max-resolution: 192dpi) and
( max-resolution: 2dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iphone 4 and iphone 4s:
@media
( min-device-width: 320px) and
( max-device-width: 480px) and
( -webkit-max-device-pixel-ratio: 2),
( max--moz-device-pixel-ratio: 2),
( -o-max-device-pixel-ratio: 2/1),
( max-device-pixel-ratio: 2) and
( max-resolution: 192dpi) and
( max-resolution: 2dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPhone 5, 5S, 5C and 5SE:
@media
( min-device-width: 320px) and
( max-device-width: 568px) and
( -webkit-max-device-pixel-ratio: 2),
( max--moz-device-pixel-ratio: 2),
( -o-max-device-pixel-ratio: 2/1),
( max-device-pixel-ratio: 2) and
( max-resolution: 192dpi) and
( max-resolution: 2dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPhone 6, 6S, 7 and 8:
@media
( min-device-width: 375px) and
( max-device-width: 667px) and
( -webkit-max-device-pixel-ratio: 2),
( max--moz-device-pixel-ratio: 2),
( -o-max-device-pixel-ratio: 2/1),
( max-device-pixel-ratio: 2) and
( max-resolution: 192dpi) and
( max-resolution: 2dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPhone 6 plus, 7 plus and 8 plus:
@media
( min-device-width: 414px) and
( max-device-width: 736px) and
( -webkit-max-device-pixel-ratio: 3),
( max--moz-device-pixel-ratio: 3),
( -o-max-device-pixel-ratio: 3/1),
( max-device-pixel-ratio: 3) and
( max-resolution: 288dpi) and
( max-resolution: 3dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPhone X, iPhone Xs, iPhone 11 Pro:
@media
( min-device-width: 375px) and
( max-device-width: 812px) and
( -webkit-max-device-pixel-ratio: 3),
( max--moz-device-pixel-ratio: 3),
( -o-max-device-pixel-ratio: 3/1),
( max-device-pixel-ratio: 3) and
( max-resolution: 288dpi) and
( max-resolution: 3dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPhone 11 and iPhone XR:
@media
( min-device-width: 414px) and
( max-device-width: 896px) and
( -webkit-max-device-pixel-ratio: 2),
( max--moz-device-pixel-ratio: 2),
( -o-max-device-pixel-ratio: 2/1),
( max-device-pixel-ratio: 2) and
( max-resolution: 192dpi) and
( max-resolution: 2dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Retina display media query for iPhone 11 Pro Max, iPhone Xs Max:
@media
( min-device-width: 414px) and
( max-device-width: 896px) and
( -webkit-max-device-pixel-ratio: 3),
( max--moz-device-pixel-ratio: 3),
( -o-max-device-pixel-ratio: 3/1),
( max-device-pixel-ratio: 3) and
( max-resolution: 288dpi) and
( max-resolution: 3dppx) {
.retina-block { background-image: url(../images/retina_2x.png);}
}
Conclusion
I hope that this blog might help you to write media queries for apple devices with retina display. I will shortly update “Media query for android devices” as well, so stay in touch.
You may also like
How does UI and UX Design Impact our everyday lives?
Today’s modern day users' wants and needs have shifted drastically. In today’s day and age, ther...
AI-Driven UI UX Testing: A Profitable Move for Modern Web Design
AI powered future is shining the brightest for companies and...
UX Design for Startups: A Key Necessity
UX design is all about top-notch user experience. UX design for startups is non-negotiable. Are you ...
