Where does the gap between computer screens and mobile phones come from?

Do you think the difference between a cell phone and a monitor is just a big, small one? Obviously, this is not the case, if the careful mobile phone users, it must be found in the same picture or photos from the phone and the display, "looks" the size of the appearance is not the same, even can be said that the difference between, So what's going on?

First from the parameters, the display size is: 21 inches, the resolution is: 1680x1050, and mobile phone size is: 3.7 inches, resolution is: sized. Through simple comparisons we can see that it is obvious that the difference between the two is not simply the magnification of the size or resolution to stretch the image.

There is actually a transition relationship between the two.

Anyone who has done print design will know that there is a dpi (dots per Inch) parameter in print that describes how many pixels are in the unit area, and the smaller the DPI, the lower the sharpness of the scan. So, in the digital age, we still have a parameter called PPI (pixels per inch), used to describe the number of pixels each inch has, it is the unit of image resolution, the higher the image PPI value, the more details of the screen. So PPI is the root of the difference in the display on the phone screen.

The conversion relationship between PPI and screen size and resolution can be mathematically calculated as:

The calculation can be found in the example of the handset's PPI is 252, while the Monitor's PPI is 90, the phone screen ppi is 2.8 times times the monitor. Simply put, the image you see on your phone is 2.8 times times as good as what you see on your monitor, or the image you see on your monitor shrinks 1/2.8 times times (about 36%), which is equivalent to the effect you see on your phone.

The introduction of PPI if you want to get this number? Then it is not worth our attention, because if you try, you will find that, as the above data, the computer image reduced to 36%, although it looks like the area of the image on the phone to see the same, but the actual image of the content has already been pasted into a group.

So what's the point of the PPI argument?

By analyzing this mathematical formula we can see that the PPI is related to the screen resolution and screen size, so if we have any two of these three sets of values, we can get another one.

For example, we learned from the ISO HMI instruction manual that iOS has some general principles: the minimum size of clickable elements is 44x44px. So we can figure out how much of a screen size corresponds to the minimum size of 44px on the iphone by calculating the PPI.

According to the previous calculation formula, we can easily get the Iphone 3GS PPI value of 164

The PPI of the 44x44px region of the smallest click region is also equal to 164;

So, by pushing the formula back, you get the actual size of the iphone 3GS's minimum click area of 0.38in.

We know 1in=25.4mm, so the size of the iphone 3GS minimum click Size on the physical screen is: 0.38*25.4=9.6mm

In fact, in general, we get more data is like this: Windows Phone recommended Click area of 9mm, minimum 7mm, the distance between elements of the smallest 7mm; Nokia: Recommend a click area of no less than 1cm (0.4″). The minimum value is: The index finger clicks 7x7mm/1mm Spacing, the thumb clicks 8x8mm/2mm Spacing, the list option has 5mm spacing .... Because the resolution and screen size of different terminals are not the same, so most vendors prefer to define more intuitive and physical dimensions to guide our design (iOS is directly defined as pixel values because they are both hardware vendors and software vendors), so the resolution of the models is entirely in their control )。

With such data, we are able to develop the software on the touchscreen phone, which makes it possible to have a good grasp of the difference between the mobile display and the display.

PPI is only a parameter, it is a bridge, the mobile phone and monitor associated, so that our design can be more accurate and targeted.

Reprint please specify from "Baidu Mux"