Adding CSS styles specific to high resolution or retina displays

This article covers the basic concepts for adding styles for high resolution mobile devices. Although the styles that you add for small screen devices using regular media queries would work.
@media only screen and (min-width: 320px) {
  /* Small screen, non-retina */
}
But if you need to add specific styles for high resolution mobile devices, here are the things that you need to know.

Concepts

Physical Resolution

This is the native resolution supported by the mobile’s display panel hardware. For example, the physical resolution for iPhone 6 is ‘1334×750’.
physical resolution for iPhone 6 is ‘1334×750’

Logical Resolution

This is the resolution used for rendering the data onto the image by the browser. For example, the logical resolution for iPhone 6 is ‘667×375’.
logical resolution for iPhone 6 is ‘667×375’

Device pixel ratio

As you see aboce that the phsical resolution is twice the logical resolution used for rendering data, the device pixel ratio for iPhone 6 becomes ‘2’.
Device pixel ratio for iPhone 6: ‘1334×750’/’667×375’=2

Dots per inch (DPI)

This is dependent on the screen size of the display. So, if the screen with a full hd resolution(1920×1080) is of 5inch(diagonal length) the the DPI would be 441. And for the same resolution but on a larger screen of 14inch, say of a laptop, then the DPI would be 157.

CSS Styles based on device pixel ratio

For adding styles you should understand, that browser renders pages using logical resolution and not the phsical resolution of the device. So, you can target devices by their device pixel ratio and logical resolution.
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 480px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 480px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 480px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 480px),
only screen and (                min-resolution: 192dpi) and (max-width: 480px) { 
    /* Add styles here specific to high resolution or retina mobile devices */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 481px) and (max-width: 768px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 481px) and (max-width: 768px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 481px) and (max-width: 768px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 481px) and (max-width: 768px),
only screen and (                min-resolution: 192dpi) and (min-width: 481px) and (max-width: 768px),
only screen and (                min-resolution: 2dppx)  and (min-width: 481px) and (max-width: 768px) { 
    /* Add styles here specific to high resolution or retina tablet devices portrait orientation */
}

Getting screen size from Resolution and DPI

For calculating screen size based upon the resolution and DPI, we need to know that screen size dimensions can be obtained by:
Screen width: (screen width resolution/DPI) = (1334/326) = 4.09″
Screen height: (screen height resolution/DPI) = ( 750/326) = 2.30″
Screen size: sqrt(screen width^2 + screen height^2) = 4.69″

List of devices

LG G4

Physical Resolution: 2560×1440
Logical Resolution: 640×360
Physical DPI: 538
Logical DPI: 384
Screen Size: 5.45″
Calculation for screen size:
sqrt((2560/538)^2 + (1440/538)^2) = 5.45inch

Samsung Galaxy S5

Physical Resolution: 1920×1080
Logical Resolution: 640×360
Physical DPI: 441
Logical DPI: 288
Screen Size: 4.99″
Calculation for screen size:
sqrt((1920/441)^2 + (1080/441)^2) = 4.99inch

Apple iPhone 6

Physical Resolution: 1334×750
Logical Resolution: 667×375
Physical DPI: 326
Logical DPI: 192
Screen Size: 4.69″
Calculation for screen size:
sqrt((1334/326)^2 + (750/326)^2) = 4.69inch

Apple iPhone 5

Physical Resolution: 1136×640
Logical Resolution: 568×320
Physical DPI: 326
Logical DPI: 192
Screen Size: 3.99″
Calculation for screen size:
sqrt((1136/326)^2 + (640/326)^2) = 3.99inch

Apple iPhone 4

Physical Resolution: 960×640
Logical Resolution: 480×320
Physical DPI: 326
Logical DPI: 192
Screen Size: 3.53″
Calculation for screen size:
sqrt((960/326)^2 + (640/326)^2) = 3.53inch
Do share or comment if you like the article. Happy coding !!!