Ultra-Comprehensive Guide to basic knowledge of mobile end dimensions

First involved in mobile design and development of the students, the basic will be in the size of the problem of entanglement for a while to get a clue. It took me a long time to figure out that it was necessary to write a course that was understandable enough to help people. Start with the principle and sort out all the details about the size. Because it is for beginners, so don't be too long-winded >>>

　　Phenomenon

First of all, we all know that mobile device screen size is very large, fragmentation is serious. Especially Android, you'll hear a lot of resolutions: 480x800, 480x854, 540x960, 720x1280, 1080x1920, and the legendary 2K screen. The iphone's fragmentation has also intensified in recent years: 640x960, 640x1136, 750x1334, 1242x2208.

Don't be intimidated by these dimensions. In fact, most of the app and mobile Web pages are displayed correctly on a variety of screen sizes. There must be a solution to the problem of size, and there are rules to follow.

　　Pixel density

You know, the screen is made up of a lot of pixel points. So many resolutions mentioned before are the actual pixel dimensions of the phone's screen. For example, the screen of 480x800, is composed of 800 rows, 480 columns of pixel points. Each point emits a different color of light that constitutes the picture we see. And the physical size of the phone screen is disproportionate to the size of the pixel. The most typical example of the IPhone 3GS screen pixel is the 320x480,iphone 4s screen pixel is 640x960. Just twice times, but two phones are 3.5 inches.

So, we're going to introduce one of the most important concepts: pixel density, or ppi (pixels per inch). This indicator is a bridge between the digital world and the physical world.

Pixels per inch, exactly, is the number of pixels arranged in the length of each inch. 1 inches is a fixed length, equal to 2.54 centimeters, about the length of the knuckles at the end of the index finger. The higher the pixel density, the finer the effect of the screen display. The retina screen is much clearer than the regular screen because its pixel density has doubled.

　　Magnification and logical pixels

Then use the iphone 3GS and 4s for examples. Suppose that there is a mailing list interface, we might as well follow the PC-side web design thinking. The 3GS will probably show only 4-5 lines, 4s can display 9-10 rows, and each line becomes extremely wide. But two phones are actually the same size. If shown in this way, 3gs just good effect, on the 4s will be too small to see the words at all.

In reality, the two effects are the same. This is because the retina screen uses 2x2 pixels as 1 pixels. For example, the original 44-pixel high top navigation bar, on the retina screen with 88 pixel height to display. Causes the interface element to become twice times the size, but is same with 3GS effect. The picture is clearer.

Previously, in the resource picture for iOS applications, the same picture usually has two dimensions. You will see the name of the file with @2x words, some without. The @2x is used in the ordinary screen, with @2x on the retina screen. As long as the picture is ready, iOS will decide which one to use, and so does the Android principle.

As a result, Apple has defined a twice-fold magnification for the retina screen (excluding the IPhone 6plus, which has reached 3 times times) on a regular screen. The actual pixel divided by the magnification, the logical pixel size is obtained. As long as the two-screen logical pixels are the same, they display the same effect.

Android solutions are similar, but more complex. Because the Android screen size is too much, the resolution is very high and low, unlike Apple only a few fixed devices, fixed size. So Android has divided the pixel densities of various devices into several ranges, defining different magnification for different ranges of devices to ensure similar display results. The pixel density concept is important, but we don't have to figure out that iOS and Android are good for us.

As shown in the figure, the pixel density of about 120 of the screen is attributed to ldpi,160 around the mdpi, and so on. In this way, all of the Android screens have found their place and given the appropriate magnification:

ldpi [0.75 times times]

MDPI [1 time Times]

hdpi [1.5 times times]

XHDPI [twice times]

xxhdpi [3 times times]

xxxhdpi [4 times times]

The magnification of the iphone is simpler, as we'll talk about later. So the Android phone is so much, how to point to how many times? What is the magnification? Let's look at a table, which is the data from the League of friends from October 2014 to March 2015:

In terms of current market conditions, the resolution of a variety of mobile phones can be roughly judged. Although not comprehensive, but at least within 1 years have a certain reference significance:

LDPI is now extinct, not to be considered

MDPI [320x480] (market share less than 5%, the new phone will not have this magnification, the screen is usually very small)

hdpi [480x800, 480x854, 540x960] (low-end machine in the early years, screen in 3.5-inch gear; today's low-end machine, screen in 4.7-5.0-inch gear)

xhdpi [720x1280] (Early middle-end machine, screen in 4.7-5.0-inch gear; today's medium and low-end machines, screen in 5.0-5.5-inch gear position)

xxhdpi [1080x1920] (early high-end machines, today's high-end machines, the screen is usually more than 5.0 inches)

xxxhdpi [1440x2560] (very few 2K screen phones, such as Google Nexus 6)

Naturally, 1 time times the MDPI as the benchmark. A device with a higher pixel density, or less, can get a similar display effect by multiplying the corresponding magnification.

It should be noted, however, that the logical pixel dimensions of the Android device are not uniform. For example, there are two common screen 480x800 and 1080x1920, which belong to HDPI and xxhdpi respectively. divided by the respective magnification 1.5 times times and 3 times times, the logical pixels are obtained for 320x533 and 360x640. Obviously, the latter is wider and higher, showing more content. Therefore, even if there is a magnification, the display of various Android devices still can not be fully consistent.

　　Unit

It's not hard to find that the logical pixel dimension is the real decision to display the effect. To do this, both iOS and the Android platform define their respective logical pixel units. The size unit of iOS is a DP for the size unit of the pt,android. To be honest, the two are actually one thing.

The conversion between units varies with the magnification:

1 time Times: 1pt=1dp=1px (mdpi, IPhone 3gs)

1.5 Times times: 1pt=1dp=1.5px (hdpi)

Twice times: 1pt=1dp=2px (xhdpi, IPhone 4S/5/6)

3 times times: 1pt=1dp=3px (xxhdpi, IPhone 6)

4 times times: 1pt=1dp=4px (xxxhdpi)

The unit determines the way we think. In the design and development process, you should try to use the logical pixel dimensions to think about the interface. When designing Android apps, some designers like to set the canvas as 1080x1920, and some like to set it as 720x1280. The dimensions of the interface elements given are not uniform. Android's minimum click Area Size is 48X48DP, which means that the button size is at least 96x96px on xhdpi devices. And on the XXHDPI equipment, it is 144x144px.

No matter how big the painting is, we design the interface style of the benchmark magnification, and the developer needs the units are logical pixels. Therefore, in order to ensure accurate and efficient communication, both sides need to be logical pixel size to describe and understand the interface, whether in the callout map or in day-to-day communication. Don't say "the height of the bottom tab bar is 96 pixels, I did it according to Xhdpi".

　　What about the web?

The absolute unit of the mobile end page is still px, at least in the code, but it's also the same as the app. Because pixel density is the intrinsic property of the device itself, it affects all applications in the device, including browsers. The front-end technology can make good use of the device pixel density, just one line of code, the browser will use the app display to render the page. According to pixel density, zoom according to the corresponding magnification.

You can http://greenzorro.github.io/demo/basic/a response breakpoint through this test page. html to look at your mobile device screen width, which is the logical pixel width.

Take the iphone 5s for example, the screen resolution is 640x1136, magnification is 2. The browser will think that the resolution of the screen is 320x568 and still the size of the benchmark magnification. So when making a page, just have to follow the benchmark magnification to the line. Regardless of what kind of screen, the magnification is how much, all according to the logical pixel size to design and develop the page. Only in the preparation of the resource map, you need to prepare twice times the size of the graph, through the code to shrink it to 1 time times the size of the display, to ensure clarity.

　　Practical application

We are most concerned about the actual use of the canvas how to set. Let's comb through iOS, Android, and web three platforms separately. Before I do that, though, I'm going to introduce a little trick for my friends who are using PS for design.

As I said before, we want to think about the interface in logical pixel size. Embodied in the design process, is to set the unit into logical pixels. Turn on the PS preferences-units and ruler interfaces, and change the size and text units to dots (point). The point here is PT, which is used for both iOS, Android, and Web applications. Of course, each platform unit name is still to be remembered. Here we use only its principle, do not care about the name.

To adjust the magnification, it is controlled by the DPI in the image size. This dpi, in fact, is the PPI, pixel density. One common sense is that the design dpi on the screen is set to 72 and the print design dpi is set to 300. Why are these two numbers?

First of all, 300, this is related to the discerning ability of the human eye. Since 1 inches is a fixed length, the number of pixels per 1 inches determines the clarity of the picture. As I said before, this is pixel density, which is dpi. The DPI reaches more than 300, and its delicate level gives the person a sense of reality, like real world objects. In contrast, the DPI is only 10, and in the length of one of your forefinger's knuckles, there are only 10 pixels, which is obviously mosaic. So the print should be set to 300 to ensure clarity.

Besides 72, there is a certain historical reason for this. The first graphic design was done on a Mac computer, and the Mac's own display resolution was 72. PS in the image DPI also set to 72, you can ensure that the screen display size and print size is the same, easy to design. The 72 PC display resolution is becoming a default industry standard, and the rules are followed.

Now back to the point, how do we adjust the magnification through the DPI? Since the resolution of the screen itself is 72,dpi set to 72 just 1 time times the size, that set to 72 twice times is the magnification of 2 screen, it is so simple.

Here's a look at the canvas settings for each of the 3 platforms:

　　Iphone

The iphone has different screen sizes, and I'm talking about the logical pixel size, which is really a pain in the neck. If you want to cover all the iphone with a design, select the logical pixel compromise model.

From the market share data, the most current is the iphone5/5s screen. The magnification is 2, the logical pixel 320x568. The biggest rise in the future is expected to be the first on the iphone 6 screen. The magnification is 2, the logical pixel 375x667.

According to these two sizes to design, are more mainstream approach. With a shorter iphone 4s, a larger 6 Plus will not be too empty.

However, in Chettu, note that since the iphone 6 Plus 3 times times the figure is magnified by twice times the figure, so the bitmap should pay attention to ensure clear.

　　Android

Say Android is fragmented, but it's now better than iOS. Because today's Android screen logic pixels are becoming unified: 360x640, it depends on how several times you set it. If you want to xhdpi, set the DPI to 72x2=144. If you want to xxhdpi, set the DPI to 72x3=216.

For those older low-end machines, the width is 480px of the batch, the screen is indeed smaller, the display content will be less. With a little attention, the important content stays in the upper part of the interface as much as possible.

Of course, these models in a year will be marginalized, the basic elimination. Now can operate as a function of the machine in use, the software is more must card, the user experience can not talk about. It is OK not to consider.

　　Web

There is no uniform standard for mobile Web pages, and the more popular approach is to design the iphone 5 size. Magnification 2, logical pixel 320x568.

This is true, the magnification of 2 of the screen in both iOS and Android are mainstream, but also twice times the smallest logical pixel screen. So the size of the picture can be kept at a smaller level, the page load faster. Of course, the disadvantage is that in the magnification of 3 of the equipment, the picture is not particularly clear.

If the pursuit of image quality, willing to sacrifice load speed, then you can follow the largest screen to design. The iphone 6 Plus size, magnification 3, logical pixel 414x736.

　　Summarize

The size of the moving end is more complex than that of the PC, and the key is magnification. But also because of the magnification of the existence of large and small screen pull back to the same level, to ensure that a set of design to adapt to a variety of screens. From the point of view of this horizontal line, you will find that it is well understood.