14 Chapter 2
You can see this illustrated in Figure 2-3. The example on the left shows
one CSS pixel on a “normal” screen with a 1:1 pixel ratio. The example in
the middle shows the same CSS pixel on a screen with a DPR of 2, like the
iPhone; there are 4 physical pixels in the same space. Finally, the example
on the right shows how this would appear on a screen with a DPR of 3, like
the Nexus 5; now there are 9 physical pixels in the space of a single CSS
pixel.Figure 2-3: A CSS pixel with a 1:1 pixel ratio (left), a DPR of 2 (middle), and 3 (right)What that means in practice is that, although the iPhone 5S (for
example) has a physical resolution of 640×1136, it has a CSS resolution
of 320×568—exactly half the dimensions, as every CSS pixel is equivalent
to two physical pixels, both horizontally and vertically (although only
when the device is in “mobile mode”; see “Device Width and Height” on
page 15 for an explanation of this).
Although this high DPR makes scalable content—such as text and vec-
tor graphics—sharp and clear, bitmap images can suffer badly from a loss
of quality when viewed on high resolution screens. To get around this prob-
lem, a new media feature, called resolution, is available that lets you target
devices based on their DPR:@media media and (resolution: value) { rules }The value of resolution is a number with a unit of resolution: dots per
inch (DPI), dots per centimeter (DPCM), or, most pertinently to us, dots per pixel
(DPPX). The DPPX unit maps to the DPR of the device, so to apply a rule to
devices that have a DPR value of 1.5, you use this:@media (resolution: 1.5dppx) { rules }As with the other media features, you can also detect maximum and
minimum pixel ratios:@media (max-resolution: number) { rules }
@media (min-resolution: number) { rules }