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.

Physical Size Difference of Smartphones (average cssppi of 157.19)
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%
Physical Size Difference of Tablets (average cssppi of 159.95)
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%
Physical Size Difference of Standard Displays (average cssppi of 97.48, Device Pixel Ratio of 1)
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%
Physical Size Difference of Apple Macbooks (average cssppi 119.64)
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.