Physical Size of CSS Units On Smartphones, Tablets & Co

When I was doing some responsive webdesign lately I came across the following situation:

In general, I want the elements on my website to have the same physical size (say in inches or centimetres) for a specific category of device. It is obvious that large screens I’m sitting an arm length or further away from should display my elements bigger than my smartphone does. The manufacturers have taken care of that by implementing a reasonable physical vs. CSS pixel ratio (Device Pixel Ratio, for short) for the devices. You can just use your known CSS units to design your page and everything else will be taken care of.

Same Sized Devices With Differently Sized Elements

Well, at least most of the time. There can be a problem with devices that lay in the same 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 roughly identical sizes, but especially their difference in resolution leads to a difference of more than 200 CSS pixels along the long side of the devices.

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 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 Touch3262163-4%
iPhone 4S / iPod Touch3262163-4%
iPhone 5 / iPod Touch3262163-4%
iPhone 5C3262163-4%
iPhone 5S3262163-4%
Asus Nexus 7 (2012 version)2161.325163.02-4%
Nexus 7 (2013 version)3232161.5-3%
HTC Butterfly4403146.677%
Evo, HD2, Thunderbolt2171.5144.678%
Desire HD2171.5144.678%
Desire, Nexus One2521.5168-7%
Sensation. Evo 3D2561.5170.67-9%
Sensation XE2561.5170.67-9%
One X, EVO LTE31221561%
One46831561%
One SV2161.51448%
LG Optimus One1801.512024%
Optimus 2X2331.5155.331%
Optimus LTE3291.7193.53-23%
Optimus 3D2171.5144.678%
Spectrum (VS920)3261.7191.76-22%
Optimus 4X HD3121.7183.53-17%
Optimus G3202160-2%
Nexus 43202160-2%
Nexus 54453148.336%
Optimus Black2331.5155.331%
Optimus G Pro4003133.3315%
Samsung Epic (D700)2331.5155.331%
Nexus S SAMOLED2351.5156.670%
Nexus S LCD2351.5156.670%
Galaxy S Plus (I9001)2331.5155.331%
Galaxy S II (I9100)2191.51467%
Galaxy S III (I9300)30621533%
Galaxy S4 (I9500)44131476%
Galaxy Nexus3162158-1%
Galaxy Ace1641164-4%
Galaxy Mega2331.8129.4418%
Sony Xperia S3422171-9%
Xperia P3422171-9%
Xperia Z4433147.676%
Xperia Z144131476%
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.93391.5226-41%
Kindle Fire HD 8.92541.5169.33-6%
Kindle Fire HD 72161.514410%
Kindle Fire1691169-6%
Apple iPad Mini 1st Gen1631163-2%
iPad Mini 2nd Gen3262163-2%
iPad 1St & 2nd Gen132113217%
iPad 3Rd & 4th Gen / iPad Air264213217%
Samsung Galaxy Tab1711171-7%
Galaxy Note2852142.511%
Galaxy Note II2672133.517%
Galaxy Note 33682184-15%
Nexus 1030021506%
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)917%
17" (1024x768)7523%
17" (1600x1200)118-21%
19" (1600x1200)105-8%
21" (1600x1200)953%
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)8513%
20" (1600x900)926%
21.5" (1920x1080)102-5%
23" (1920x1080)962%
24" (1920x1080)926%
26" (1920x1080)8513%
27" (1920x1080)8216%
27" (2560x1440)109-12%
16:10 15.4" (1280x800)98-1%
19" (1440x900)899%
17.3" (1600x1024)109.8-13%
20.1" (1680x1050)99-2%
22" (1680x1050)908%
23" (1920x1200)98-1%
24" (1920x1200)944%
26" (1920x1200)8711%
27" (1920x1200)8414%
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)1351135-13%
Air 13" (2010 – 2013)1281128-7%
Pro 13" (2009 – 2012)11311136%
Pro 13" Retina (2012 - 2013)2272113.55%
Pro 15" (2006 – 2012)11011108%
Pro 15" w/ Hi-Res screen (2010 – 2012)1281128-7%
Pro 15" Retina (2012 - 2013)22021108%

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.

comments powered by Disqus
Image Credit: Eric Martin
BACK TO TOP