When designing and developing a website for mobile devices, there are many things one needs to consider. Are you using a responsive or adaptive approach? What devices / browsers should be supported? What are the major breakpoints? When trying to answer these questions, we as designers and developers tend to focus on mobile device resolutions as a deciding factor, but one thing that is often overlooked when considering the size of a mobile device is the CSS pixel ratio.
Put plainly, CSS pixel ratio (also referred to as device pixel ratio) is the relation between a device’s physical pixels and logical pixels. Especially with the advent of retina screens, the pixel resolution of modern mobile devices is growing at a fast rate. Consider that the iPhone 3g had a resolution of 320×480 px, the iPhone 4s’ resolution was 640×960 px, and now some phones like the LG Nexus 5 boast a resolution of 1080×1920 px. How is one supposed to design a website for all mobile devices when their screen sizes are so vastly different? That is precisely why the device-pixel-ratio was created.
Jumping back to the idea of physical pixels and logical pixels, we can see how device pixel ratio helps keep things in order. Physical pixels are the actual number of pixels in a device’s screen. Using the Nexus 5 as an example again, its screen resolution is 1080×1920 px, meaning its physical screen is 1080px wide and 1920px tall. Now if a browser were to use every single one of those pixels when it tried to render and display a website on a phone with a 5 inch screen, things would be far too small to see. Enter logical pixels. Logical pixels are defined as the number of physical pixels in a device’s screen divided by the CSS pixel ratio, and logical pixels are what you see when you look at your device (and more importantly, what your browser sees). For the Nexus 5, its pixel ratio is 3/1, so for every 3 physical pixels there is 1 outputted logical pixel (this is often referred to in units of dppx, or dots per pixel). That takes a physical resolution of 1080×1920 px down to a logical resolution of 360×640 px, and a much more manageable view for your eyes.
The table below outlines some more devices and their pixel ratios.
| Device | Physical Resolution | CSS Pixel Ratio | Logical Resolution |
| iPhone 3g | 320×480 px | 1 | 320×480 px |
| iPhone 4s | 640×960 px | 2 | 320×480 px |
| iPhone 5 | 640×1136 px | 2 | 320×568 px |
| iPhone 6 | 750×1334 px | 2 | 375×667 px |
| iPad 2 | 768×1024 px | 1 | 768×1024 px |
| iPad 3 | 1536×2048 px | 2 | 768×1024 px |
| Samsung Galaxy S III | 720×1280 px | 2 | 360×640 px |
| Samsung Galaxy S4 | 1080×1920 px | 3 | 360×640 px |
Want to see how this translates to your own device? Pull out your phone or tablet and check out the demo I’ve created to show you what your own device’s CSS pixel ratio is.
The important thing to take from this is that a device’s screen resolution when viewed in a browser is not always what it says on the back of the box.
