Device Size Miscellany: Dimension issues in responsive Web design

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:

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