One of the biggest headaches in designing interfaces for mobile devices is size. We can’t design with a fixed size because the sizes of different devices vary. But if we understand the physics of the device, it will help us to design it better.

 

 

Different devices may have the same screen resolution, but their physical properties are very different. The first iPad has a 9.7-inch screen with 1024 x 768 resolution and 132dpi. The Kindle Kyeboard 3G has a physical size of just 6 inches, also 768 by 1024 resolution, and 212dpi pixels.

 

There are several ways to get screen sizes, including “Resolution Media Query”, which has been around for a long time as a specification for Media Queries, but was not supported by all browsers until it was released. Fortunately, WebKit has taken an important step in this direction, and here are the basics:

 

@media ( min-resolution: 250dpi ){

     

}

 

This sentence will filter out low resolution images and keep only high resolution images.

 

In fact, for designers, they are not that interested in resolution. Since they’re designed for humans, it’s best to have units like width: 1 inch. Unfortunately, in today’s electronic society, the size of physics is not exactly the same as that of electronic pixels. As designers, we need to fill the gap between the two differences.

 

Compare the following two pieces of code:

 

@media (min-resolution:341dpi) and (min-width: 767px) > {

 

}

 

@media (max-resolution:131dpi) and (min-width: 767px) > {

 

}

 

At first glance, the two pieces of code look very similar and are actually used to distinguish between different devices, the first for HTC Windows Phone 8X and the second for iPad2. By using Resolution Query, you can distinguish small devices from large ones. Both devices are 768px wide and have a physical size of 10 inches (iPad) and 4.3 inches (HTC). What’s more, the iPad has a lower resolution (1024 by 768) than the HTC’s (1280 by 768). Using Resolution Media Query and Width Query together, we can distinguish devices of different sizes with the same Width and adjust the layout of elements in the design accordingly.

 

As mentioned earlier, we don’t really care about the resolution of each device, we care more about whether the interface is displayed on a larger (physically) device or a smaller one. So how do we define big versus small? In fact, there is no clear division, we have to start from the reality of each project, the equipment is small in this project, but in another project, may be classified as large equipment.

 

The Physical Size Inquiry Non-Exhaustive Theorem

 

Theory: In a combined query, if the ratio of Resolution Resolution to the smaller of width and height is greater than 5, it can basically be classified as a large device; if it is less than 5, it can basically be classified as a small device. If the score is close to 5, it is a medium device, physically close to the size of a sheet of A4 paper (21 x 29.7cm).

 

Here’s a table to test the theory:

 
Device name Diagonal dimensions (inches) The resolution of the PPI PSINET score
Apple iMac 27 2560 * 1440 109 13.00
Sony Vaio F 16.4 1920 * 1080 134 8.05
Apple MacBook Pro RD 13 2560 * 1600 227 7.04
         
Sony PSP 4.3 480 * 272 128 3.75
Kindle Keyboard 3G 6 768 * 1024 212 3.62
Kindle Fire 7 1024 * 600 169 3.55
Samsung Galaxy S 4 480 * 800 160 3.00
Samsung Galaxy Note II 5.5 720 * 1280 267 2.69
Samsung Galaxy S IV 5 1080 * 1920 441 2.62
HTC Butterfly 5 1080 * 1920 441 2.62
Samsung Galaxy Grand I9082 5 480 * 800 187 2.56
Palm Pre 3.1 480 * 320 186 2.5
Sony Xperia Z 5 1920 * 1080 443 2.43
Samsung Galaxy S III 4.8 720 * 1280 306 2.35
LG Nexus 4 E960 4.7 768 * 1280 318 2.41
Nokia Lumia 920  4.5 1280 * 768 332 2.31
HTC One  4.7 1080 * 1920 469 2.30
HTC One X 4.7 720 * 1280 312 2.30
HTC Desire HD 4.3 480 * 800 217 2.21
iPhone 5 4 640 * 1136 326 1.96
Apple iPod Touch 3.5 960 * 640 326 1.96
         
Apple iPad(1 & 2) 9.7 1024 * 768 132 5.81
Apple iPad(3rd Gen) 9.7 2048 * 1536 264 5.81
Amazon Kindle DX 9.7 824 * 1200 150 5.49
MICROSOFT SURFACE 10.1 1366 * 768 148 5.18
iPad Mini 7.9 768 * 1024 162 4.74
         
         

 

Using PSINET to determine the size of the device is just an assumption, which is more accurate if the length and width of the device are not different, but if the length and width are too different, the figure is not accurate.

 

If a screen is 1280px wide, 720px high and 4.3inches diagonally, the formula for PPI is as follows:

 

 

References:

1. Device Size Matters: Responsive Web Design With Physical Units

2. Learn Media Query

3, Logical Breakpoints in responsive design

4. Media Type and Media Query