[chat series] talk about mobile web resolution

Time:2020-11-25

Welcome to watch and talk about the series. This series of articles can help front-end engineers understand all aspects of the front-end (not just the code)

https://segmentfault.com/blog/frontenddriver

Different from the PC era, the style of mobile web is more diverse, and due to the fragmentation of mobile phone resolution, the compatibility problem of mobile web is increasingly prominent. Next, I will talk about the mobile phone resolution problem faced by mobile web with readers.

1. The transition from PC to mobile, rendering

In the PC era, when we write CSS, we should think that the 1px we write is the width of 1px on the screen.
However, when it comes to the mobile terminal, things are not like this. The 1px we write is actually on the screen, which may be 2px or 3px. Even as much PX as you want. Why is that? Let’s talk about an old story~Things~~~
When Apple releases IOS, it will surely think of thousands of PC pages that can’t run on its own IOS system. What a pain in time. However, these pages are all in the case of the PC screen.
Two divs with a width of more than 500 PX are juxtaposed. It was devastating when it was shown on the 640 * 960 screen size iPhone 4. (there will be all kinds of folding, disordered style), so meticulous as apple certainly does not allow this kind of thing to happen.
So Apple’s siege lions came up with a trick, which is to tell the browser, “you’re rendering on a 980 wide screen.”,The browser will render the page image in the way of 980 width.But when you get to the browser, you actually get a rendered web page image larger than the screen.At this point, apple zooms the image down to the screen size.(we usually do this, enlarging and reducing a large picture with two fingers)

Observe the computer version of segment fault on the mobile phone, which is formally shown in Figure 1.1

[chat series] talk about mobile web resolution

Figure 1.1

2 the width of the layout that can be changed

The above browser will render the page image in the way of 980 width.We call the view layout the basis of our browser. In fact, we can specify the width of the spoofing browser.

For example, our default width of the viewer is 980px. We write a div with a width of 480. When it is displayed on the web page, it looks like this (as shown in Figure 1.2.1)

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h1 style=" width:480px;background-color : ා000; color: #fff; "> test</h1>
</body>
</html>

[chat series] talk about mobile web resolution
Figure 1.2.1

What happens if we write the viewer tag and let it layout and tell the browser that it is a small screen with a width of 480? (as shown in Figure 1.2.2)

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=480" />
</head>
<body>
    <h1 style=" width:480px;background-color : ා000; color: #fff; "> test</h1>
</body>
</html>

[chat series] talk about mobile web resolution
Figure 1.2.2

At this point, the browser will actually render with a width of 480. That’s the charm of the viewer. We can change the width of this viewer. How much is appropriate?

Most websites take the form of

Width = device width, that is, don’t fool the browser. Just like on PC, the browser will render according to the width of the mobile phone screen.

This is a better solution, because now, there will be no scaling problem. The design is designed according to the mobile phone, and the display is also displayed according to the mobile phone, which is much better (as shown in Figure 1.2.3).

<html>
<head>
    <meta charset="utf-8" />
    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <h1 style=" width:320px;background-color : ා000; color: #fff; "> test</h1>
</body>
</html>

[chat series] talk about mobile web resolution
Figure 1.2.3

3. Pixels changed again

Times are changing, and the iPhone is no exception. The iPhone 3 has 320 pixelsHowever, on the iPhone 4, although the screen has not become larger, the pixel density has increased greatly to 640960, you can’t double the size of the web pages you designed before? So the old drivers of Apple started driving again.

The iPhone 4 says to the browser, “my width is 320px,” but the iPhone 4 is 640px. We render according to the design of 320px, but in the real world, the 1px elements we write are actually rendered to the user in 2px. Some students may say, this did not make the previous page bigger?

Nonono, don’t forget, the size of the phone hasn’t changed, it’s just an inch in the physical world, with more pixels on it. In the past 1px screen pixels, displayed in front of the human eye is 1 / 96 inch. After the pixel density is doubled, the width of a pixel is 1 / 962 inches. So two pixels are two1 / (96 * 2) = 1 / 96 inch. The width of the physical world is back.

In other words, although the pixels are bigger, the 10px image looks the same size on the iPhone 3 and iPhone 4.

Here, we have learned two points:

1. The logic resolution of 320px. For us, whether it is iPhone 3GS or iPhone 4, we should write code according to 320px. This is our logic.

2. The physical resolution of 320px / 640px is 320px / 640px. For iPhone 3GS, it will display according to 320px. For 640px iPhone4, it will multiply the logical resolution we wrote and display it again. That’s why the physical resolution on the iPhone 4 is twice the logical resolution. The graph that UE gives you, you divide by 2 to write code.

4. Another change

In 2014, Apple launched a new generation of iPhone 6 / iPhone 6 plus, whose screens are wider and larger than the iPhone 4. Therefore, it is obviously not possible to maintain the original 320 width method. As a result, Apple has increased the resolution in proportion to the size of the phone:

4.1 General expansion of iPhone 6

As we can see in the figure above, the width of the iPhone 6 is 750px, and the width of the iPhone 4 is 640px (physical resolution). The scale should be 750 / 640
The width of the logical resolution of the iPhone 6 is 375px, and that of the iPhone 4 is 320px, with a ratio of 375 / 320.
750 / 640 = = 375 / 320, so apple just expanded the phone a little bit. By the way, the logic resolution is also expanded. It doesn’t affect our writing.

4.2 expanded HD of iPhone 6 plus

The most painful point of this upgrade is the iPhone 6 plus. Apple hopes to have a higher definition screen, so they once again use the big idea. A 5.5-inch screen can hold 1080 pixels in width.

However, the old drivers of apple are in a dilemma, how to “cheat the browser”? This time it’s compressed three times. That is, one logical pixel corresponds to three physical pixels.However, this is not the case at all. They only render 2.6 pixels on the same width screen as the iPhone 4, 2 pixels for iPhone 4 and 1 pixel for iPhone 3GS.

So, according to our previous theory, should the logical pixel be 1080 / 2.6. Yes, 1080 / 2.6 ~ = 414px, so our logic resolution is fixed at 414 * 736.

But! 2.6 this ratio is too painful. Apple really wants us to believe that its screen is good, so Apple once again uses deception. It makes us think that its screen is 12422208 super HD screen. So, it seems that there are three pixels in the screen size of 1px as the iPhone 3. So we divide 1242 by 3 to get our logical resolution: 414px. What’s more, UE (designers) produce a 1242 picture, and engineers divide it by 3, which is much better than UE’s picture of 1080px and engineers dividing it by 2.6. Think about it. Is it better to divide by 2.6 or 3? However, the actual rendering of the iPhone 6S plus is 1080px? Zoom, so the browser rendered 1242The image of 2208 is zoomed to 1080 * 1920 by the iPhone 6S plus (just like the image we zoomed with our fingers)

This ratio is 3 times or 2 times. The front end can get it from the browser: window.devicePixelRatio

The conclusion is that the physical resolution of the iPhone 6S plus is three times that of the logical resolution. If you divide the graph given by UE by 3 and write the code.

The resolution of several generations of iPhones is shown in Figure 4.2.1

[chat series] talk about mobile web resolution

Figure 4.2.1

According to the above, our conclusion is that although the same logical pixel is used on the iPhone 6 and on the iPhone 6 plus, the iPhone 6 plus will scale the rendered image.

IPhone 6

Logic pixel of 1px = = = true physical pixel of 2px = = = 2px * 63.5px/326ppi = = = = (1 / 64) cm

Then there is the iPhone 6 plus: (note that the PPI in this is calculated using the actual physical size of 1080)

Logic pixel of 1px = = = 3px, we think it is physical pixel of 3px = = = 3True physical pixel of 1080 / 1242 = = = 2.6px63.5px/401ppi ===(2.6/157)cm

In this way, under the iPhone 6S plus and iPhone 6 plus, the size of the real world display is about 1.15 times larger than that of the iPhone 6 / iPhone 5. After measurement (measured with a ruler), there is indeed such a multiple relationship.

It’s time to talk about Android

Now that we’ve finished the story of Apple’s evolution, it’s time to talk about Android. In fact, after understanding Apple’s mechanism, Android is not difficult to understand. These scattered Android devices also adopt the design method that physical pixels are n times of logical pixels. Of course, the number of N depends on the Android manufacturer. In short, our code on Android is also rendered according to logical pixels.

6 after class questions

Do you know how to describe logical resolution and physical resolution?

In the next article, I’ll talk about iconfont with readers. Don’t go away. Please pay attention to me

https://segmentfault.com/a/1190000005904616

Original article, all rights reserved, please indicate the source

Recommended Today

Method of hiding version number and web page cache time in nginx

Nginx Optimization — Hide version number and page cache time Configure nginx to hide version number In the production environment, we need to hide the version number of nginx to avoid security Leakage of loopholes View method Use Fiddler I to check the nginx version number on the Windows client Using “curl – I URL” […]