Screen and pixel sizes on phone and tablet devices

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.

Piet Mondrian: Composition Chequerboard, Dark Colors, from year 1919

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-
Pixel ratio Unit
Samsung Galaxy Y (S5360) 3,0” 240×320 320 427 0,75 css
Apple iPhone, 4th Gen 3,5” 640×960 320 320 2 css
Nokia Lumia 800 3,7” 480×800 480 480 undefined device
Samsung Galaxy S Plus (i9001) 4,0” 480×800 320 533 1,5 css
Sony Xperia S 4,3” 720×1280 360 640 2 css
Samsung Galaxy SII (I9100) 4,8” 480×800 480 800 undefined device
Samsung Galaxy Note 5,3” 800×1280 800 1280 2 device
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
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.

Leave a Reply

Your email address will not be published. Required fields are marked *