Physical Size of CSS Units On Smartphones, Tablets & Co
Note from 2018: Although this article was written in and uses data from 2014, its findings are just as applicable today.
To make sure a (web) interface is usable its elements must have the right size to comfortable interact with them. Too big and the interface feels too clumsy. Too small and it becomes frustrating to point at stuff. To guarantee usability across all kinds of displays, the elements have to have the same physical size (say in inches or centimeters) within a specific category of a display.
It is obvious that a large screen I’m sitting an arm length away from should display elements bigger than a smartphone I’m holding in my hands does. The manufacturers have taken care of that by implementing a reasonable physical vs. CSS pixel ratio (Device Pixel Ratio, for short) for mobile devices. You can just use your known CSS units to design your page and everything else will be taken care of. Well, at least most of the time…
Same Sized Devices With Differently Sized Elements
There are differences within the same device category: Some have the same resolution and the same Device Pixel Ratio, but vary in size. Or, they have a similar size, but their resolutions and Device Pixel Ratio do not behave proportionally.
- The iPad 1/2 and iPad Mini 1 have the same resolution of 1024x768 and the same Device Pixel Ratio of 1, but the iPad’s diagonal is about 2 inches larger than the iPad Mini’s.
- The LG Optimus 3D and LG Spectrum have a roughly identical size, but especially their difference in resolution leads to a difference of more than 200 CSS pixels along the long side of their display.
At this point it becomes clear, that for now there is no way to design pages with exact physical dimensions in mind. Well, you could try to differentiate between small and large devices with a resolution media query. But this doesn’t get you around the fact that your element will be of different size on different devices.
Comparing the Physical Size of CSS Units Across Devices
To get a feeling about these different sizes I generated the following tables for the categories smartphones, tablets, standard displays and Macbooks. They take some devices and their data from wikipedia’s [note from 2018: now defunct] List of Displays by Pixel Density and calculate the CSS Resolution in CSS pixels per inch (cssppi). For each category the average CSS Resolution is calculated and the cssppi of each device is then set into relation to it in the Physical Size Difference column. A value of 10% in this last column says the device displays its content about 10% larger than the average device of this category. Concrete: If the average device displays an element with a width of 100 px in CSS land as 1 inch wide on its screen a device with a size difference of 10% will display this 100 px element as 1.1 inches wide.
| Brand | Device | Resolution [ppi] | Device Pixel Ratio | CSS Resolution [cssppi] | Physical Size Difference |
|---|---|---|---|---|---|
| Apple | iPhone 4 / iPod Touch | 326 | 2 | 163 | -4% |
| iPhone 4S / iPod Touch | 326 | 2 | 163 | -4% | |
| iPhone 5 / iPod Touch | 326 | 2 | 163 | -4% | |
| iPhone 5C | 326 | 2 | 163 | -4% | |
| iPhone 5S | 326 | 2 | 163 | -4% | |
| Asus | Nexus 7 (2012 version) | 216 | 1.325 | 163.02 | -4% |
| Nexus 7 (2013 version) | 323 | 2 | 161.5 | -3% | |
| HTC | Butterfly | 440 | 3 | 146.67 | 7% |
| Evo, HD2, Thunderbolt | 217 | 1.5 | 144.67 | 8% | |
| Desire HD | 217 | 1.5 | 144.67 | 8% | |
| Desire, Nexus One | 252 | 1.5 | 168 | -7% | |
| Sensation. Evo 3D | 256 | 1.5 | 170.67 | -9% | |
| Sensation XE | 256 | 1.5 | 170.67 | -9% | |
| One X, EVO LTE | 312 | 2 | 156 | 1% | |
| One | 468 | 3 | 156 | 1% | |
| One SV | 216 | 1.5 | 144 | 8% | |
| LG | Optimus One | 180 | 1.5 | 120 | 24% |
| Optimus 2X | 233 | 1.5 | 155.33 | 1% | |
| Optimus LTE | 329 | 1.7 | 193.53 | -23% | |
| Optimus 3D | 217 | 1.5 | 144.67 | 8% | |
| Spectrum (VS920) | 326 | 1.7 | 191.76 | -22% | |
| Optimus 4X HD | 312 | 1.7 | 183.53 | -17% | |
| Optimus G | 320 | 2 | 160 | -2% | |
| Nexus 4 | 320 | 2 | 160 | -2% | |
| Nexus 5 | 445 | 3 | 148.33 | 6% | |
| Optimus Black | 233 | 1.5 | 155.33 | 1% | |
| Optimus G Pro | 400 | 3 | 133.33 | 15% | |
| Samsung | Epic (D700) | 233 | 1.5 | 155.33 | 1% |
| Nexus S SAMOLED | 235 | 1.5 | 156.67 | 0% | |
| Nexus S LCD | 235 | 1.5 | 156.67 | 0% | |
| Galaxy S Plus (I9001) | 233 | 1.5 | 155.33 | 1% | |
| Galaxy S II (I9100) | 219 | 1.5 | 146 | 7% | |
| Galaxy S III (I9300) | 306 | 2 | 153 | 3% | |
| Galaxy S4 (I9500) | 441 | 3 | 147 | 6% | |
| Galaxy Nexus | 316 | 2 | 158 | -1% | |
| Galaxy Ace | 164 | 1 | 164 | -4% | |
| Galaxy Mega | 233 | 1.8 | 129.44 | 18% | |
| Sony | Xperia S | 342 | 2 | 171 | -9% |
| Xperia P | 342 | 2 | 171 | -9% | |
| Xperia Z | 443 | 3 | 147.67 | 6% | |
| Xperia Z1 | 441 | 3 | 147 | 6% |
| Brand | Device | Resolution [ppi] | Device Pixel Ratio | CSS Resolution [cssppi] | Physical Size Difference |
|---|---|---|---|---|---|
| Amazon | Kindle Fire HDX 8.9 | 339 | 1.5 | 226 | -41% |
| Kindle Fire HD 8.9 | 254 | 1.5 | 169.33 | -6% | |
| Kindle Fire HD 7 | 216 | 1.5 | 144 | 10% | |
| Kindle Fire | 169 | 1 | 169 | -6% | |
| Apple | iPad Mini 1st Gen | 163 | 1 | 163 | -2% |
| iPad Mini 2nd Gen | 326 | 2 | 163 | -2% | |
| iPad 1St & 2nd Gen | 132 | 1 | 132 | 17% | |
| iPad 3Rd & 4th Gen / iPad Air | 264 | 2 | 132 | 17% | |
| Samsung | Galaxy Tab | 171 | 1 | 171 | -7% |
| Galaxy Note | 285 | 2 | 142.5 | 11% | |
| Galaxy Note II | 267 | 2 | 133.5 | 17% | |
| Galaxy Note 3 | 368 | 2 | 184 | -15% | |
| Nexus 10 | 300 | 2 | 150 | 6% |
| Aspect Ratio | Size [in] (Resolution [px]) | CSS Resolution [cssppi] | Physical Size Difference |
|---|---|---|---|
| 4:3 | 14" (1024x768) | 91 | 7% |
| 17" (1024x768) | 75 | 23% | |
| 17" (1600x1200) | 118 | -21% | |
| 19" (1600x1200) | 105 | -8% | |
| 21" (1600x1200) | 95 | 3% | |
| 19" (1920x1440) | 126 | -29% | |
| 21" (1920x1440) | 114 | -17% | |
| 24" (1920x1440) | 100 | -3% | |
| 16:9 | 14" (1366x768) | 112 | -15% |
| 15.6" (1366x768) | 100 | -3% | |
| 16" (1366x768) | 98 | -1% | |
| 18.5" (1366x768) | 85 | 13% | |
| 20" (1600x900) | 92 | 6% | |
| 21.5" (1920x1080) | 102 | -5% | |
| 23" (1920x1080) | 96 | 2% | |
| 24" (1920x1080) | 92 | 6% | |
| 26" (1920x1080) | 85 | 13% | |
| 27" (1920x1080) | 82 | 16% | |
| 27" (2560x1440) | 109 | -12% | |
| 16:10 | 15.4" (1280x800) | 98 | -1% |
| 19" (1440x900) | 89 | 9% | |
| 17.3" (1600x1024) | 109.8 | -13% | |
| 20.1" (1680x1050) | 99 | -2% | |
| 22" (1680x1050) | 90 | 8% | |
| 23" (1920x1200) | 98 | -1% | |
| 24" (1920x1200) | 94 | 4% | |
| 26" (1920x1200) | 87 | 11% | |
| 27" (1920x1200) | 84 | 14% | |
| 30" (2560x1600) | 101 | -4% |
| Model | Resolution [ppi] | Device Pixel Ratio | CSS Resolution [cssppi] | Physical Size Difference |
|---|---|---|---|---|
| Air 11" (2010 – 2013) | 135 | 1 | 135 | -13% |
| Air 13" (2010 – 2013) | 128 | 1 | 128 | -7% |
| Pro 13" (2009 – 2012) | 113 | 1 | 113 | 6% |
| Pro 13" Retina (2012 - 2013) | 227 | 2 | 113.5 | 5% |
| Pro 15" (2006 – 2012) | 110 | 1 | 110 | 8% |
| Pro 15" w/ Hi-Res screen (2010 – 2012) | 128 | 1 | 128 | -7% |
| Pro 15" Retina (2012 - 2013) | 220 | 2 | 110 | 8% |
How a Website Scales On Different Devices
This is by no means a complete list. I have taken the devices with available data that seemed like reasonable representatives of their kind to me. I filtered out some absurd devices like 16:9 standard displays with a 16 inch diagonal and a resolution of 1920x1080.
So, what does it all mean?
In general, smartphones and tablets are treated the same way by manufacturers regarding their CSS resolution. Both categories have a similar average resolution of about 160 cssppi. This makes sense since both types of devices are held in your hands. Macbooks have about 120 cssppi on average, indicating they are further away than phones and closer than monitors with an average of 96 cssppi. I haven’t looked at values for other notebooks, so I cannot say, if they behave the same.
Besides that:
- Smartphones, common standard displays and Macbooks are relative uniform and most of them vary in displayed physical size in the bounds of ± 10%. I cannot think of a case where you cannot live with such a difference in size. So generally, there shouldn’t be much of a problem.
- Larger standard displays generally show their content bigger.
- Tablets and more unusual standard displays show a wider range of size differences. It could happen, that it looks good on one device and is too small or big on another.
- Of course, there are some extreme cases. The most extreme ones are the Amazon Kindle Fire HDX 8.9 showing elements 41% smaller than average and the LG Optimus One showing elements 24% larger than average. By looking on their CSS resolution this means, that the Optimus One displays its content almost twice as big as the Kindle.
If you check your design on devices, I suggest to take the ones close to the average, if possible. No extreme cases. Or at least know, that you are looking at a devices that displays content larger/smaller in relation to another device.