The size of a pixel has been about standard, 38 pixels per centimeter (96dpi). When you talked of “14 pixel Arial” size, you used to be understood correctly, just like when you would speak of “the size of a tennis ball”. Because new phone and tablet display devices have greater pixel density than what devices used to have, the concept of pixel has become complex.
Web page style definitions use CSS pixel for length measures in order to make different display devices show pages in the same way. Four CSS pixels fit on one millimeter when watched at arm length distance. CSS pixel is a more appropriate length measure unit than device pixel because css pixel has standard size whereas the size of a device pixel is always relative to the pixel density of a display. If font size is given in device pixels, the millimeter size of fourteen pixels is only half in Samsung Galaxy Note compared to another Samsung phone device, Galaxy Y.
The device pixel ratio tells how many CSS pixels go one device pixel. The pictures of a Goldilocks blog article illustrate the concept. Reported pixel ratios of some currently sold phone and tablet devices are listed in the table below, as well as the screen widths that the device default browsers give when holding in portrait and landscape positions.
Device | Size | Resolution | Portrait | Land- scape |
Pixel ratio | Unit |
Samsung Galaxy Y (S5360) | 3,0” | 240×320 | 320 | 427 | 0,75 | css pixel |
Apple iPhone, 4th Gen | 3,5” | 640×960 | 320 | 320 | 2 | css pixel |
Nokia Lumia 800 | 3,7” | 480×800 | 480 | 480 | undefined | device pixel |
Samsung Galaxy S Plus (i9001) | 4,0” | 480×800 | 320 | 533 | 1,5 | css pixel |
Sony Xperia S | 4,3” | 720×1280 | 360 | 640 | 2 | css pixel |
Samsung Galaxy SII (I9100) | 4,8” | 480×800 | 480 | 800 | undefined | device pixel |
Samsung Galaxy Note | 5,3” | 800×1280 | 800 | 1280 | 2 | device pixel |
Samsung Galaxy Tab | 7,0” | 600×1024 | 600 | 1024 | 1 | |
Sony Tablet S1 | 9,4” | 800×1280 | 800 | 1280 | 1 | |
Apple iPad 2 | 9,7” | 768×1024 | 768 | 768 | 1 | |
Apple iPad, 3rd Gen | 9,7” | 1536×2048 | 768 | 768 | 2 | css pixel |
Samsung Galaxy Tab 10.1 | 10,1” | 800×1280 | 800 | 1280 | 1 | |
Acer Iconia Tab A200 | 10,1” | 800×1280 | 800 | 1280 | 1 | |
Acer Iconia Tab A510 | 10,1” | 800×1280 | 800 | 1280 | 1 | |
Asus Eee Pad Transformer | 10,1” | 800×1280 | 800 | 1280 | 1 |
Sometimes screen size is measured in low level device pixels when CSS pixel should be used according to CSS standards. However, the majority of currently sold phone and tablet devices report screen size in CSS pixels. (If device pixel ratio is one, css and device pixels have same size.)
The inch size of a device is more informative than device pixel resolution. Almost all devices with less than 5 inches screen size are phones (aka. handheld devices). Because it is convenient to hold a small device with one hand and such a device is thus watched from closer than a bigger, lap-held tablet device, phones have typically smaller pixel size than tablet devices. The screen sizes of tablets are between 7 and 10.1 inches. There are only few devices with 5 – 7 inch screen size. Of currently sold devices, Samsung Galaxy Note and book readers have such screens.
In a test two years ago, low level device pixel was the most common unit in which phone and tablet devices reported screen width and height values. It is delighting to see that CSS pixel is now more commonly used because it is a device independent, end user appropriate unit.