Foreword: front end of you, whether ever secretly happy finally threw off IE6, however a turn around, abrupt guard against step into mobile end fragment pit, after today, can need not too entangled, because can I help you reshape to mobile end understanding, from now on, handy, promote efficiency is not a dream. You can win a hundred battles by knowing yourself and your enemy, and the same goes for our front-end development. Knowing what it is, knowing why it is, no matter from the point of view of loading force or actual development, it is a hundred benefits and without harm. Let’s look at a snippet of code:

<html style="font-size:75px;" >
<head>
<meta name="viewport" content="Initial - scale = 0.5, the maximun - scale = 0.5, user - scalable = no" />
</head>
<body>
</body>
</html>
Copy the code

This code, which I’m sure you’re all familiar with, does two things: 1. 2. Define the viewPort scale. Of course, it would be underestimating me just to think THAT I’m cooking these two famously cold dishes again. We need a deeper understanding of browsers (and of course WebViews) to make adaptation development easier. First of all, what is front-end layout development? Essentially, it’s all about manipulating pixels to achieve various page effects, so let’s start with pixels.

First, we need to know a few basic concepts.

1. CSS pixels

The pixels that we manipulate with CSS are called CSS pixels, which are device independent pixels, as the name implies.

2. Physical pixels

If there are exdependencies, there must be device-related ones, which are our physical pixels. We manipulate CSS pixels, and they’re represented by physical pixels, and before Retina, the number of CSS pixels is equal to === physical pixels, which means that an image of 1 CSS pixel is represented by 1 physical pixel, which is fine on a large PC screen, but not on a mobile browser, That’s why Apple introduced the Retina display.

3. Device independent pixel ratio

DevicePixelRatio = Physical pixel/CSS pixel, hereafter referred to as DPR, before Retina display, DPR ===1, after Retina display, DPR >=1.5 screen mushroem.

4. Screen resolution

The number of pixels displayed on the screen, in the PC era of Microsoft, many people have a misunderstanding, screen resolution is proportional to the screen size, always think that to improve the resolution will improve the screen size, in fact, the 4K resolution of the screen has been applied to a large mobile phone screen.

5. Pixel Density (PPI)

The number of pixels per inch is directly related to screen resolution. Generally speaking, a screen with a higher pixel density has a higher screen resolution.

6, the viewport

This is an extremely important concept in mobile development. Viewport of early mobile terminal is the same concept as viewport of PC, which leads to poor experience on small screen. Later, apple introduced visualviewport and layoutviewport. To clarify, these two Windows are perspective effects, imagine that layoutViewPort is a large image that cannot be resized or angled. Let’s look at layoutviewport through visualviewport (see George Cummins’ explanation on Stack Overflow). Viewing distance (the user’s miniaturization function) allows you to see the large image all at once. Or close up (the user’s ability to zoom in on the page) can see part of it. You can change the orientation of the perspective box, but the size and shape of the large image will not change.




Therefore, this sentence is the most important when adapting solutions.

Two, adaptation scheme

When we do layout scheme is certainly hoping to use some kind of general layout scheme, in the face of so many DPR, the best way is to adapt according to the different proportion of DPR, try to avoid the use of media layout for each set of equipment adaptation, it really became a brick code farmers. Back to our first code, we need to set meta ViewPort and REM. We don’t worry about special cases, rem=window.innerWidth/10

1. The first scheme: Zoom the screen according to DPR to achieve the effect of DPR =1

For example, if you have an iphone6 with Retina display DPR =2, your viewport meta should look like this:

2. The second option: initial-scale=1 regardless of the DPR value

This solution is essentially the same as the first solution, but it keeps the original features that THE DPR gave me, without scaling CSS pixels. At this point, using the same device size 375 and DPR =2, the actual number of pixels we can work with is still 375. Our base rem in this case is window.innerWidth/10=375/10=37.5.

Conclusion: Although the two benchmark REM schemes are different, they are identical in essence

How do you understand that? 1. Since both are relative to the base REM layout, suppose we want to display them in full screen with width of 10REM. 2. Layout is also based on the double graph. For example, if we have a picture of 100*100 size, we need to display it on the device of 100*100 size and DPR =2. Each pixel is rendered by 4 pixels, which can only be approximated, so it also causes blur, and the result is blur, but both schemes have their similarities and differences, so we want to show 100 by 100 images on a 2x screen, and the image has to be a 2x image, 200 by 200.

conclusion

After understanding the basic principle, I believe you can achieve your own set of layout scheme, of course, if you don’t want to bother, do not want to repeat the wheel, Taobao team flexible scheme is enough, the principle is consistent.

Reference Documents:

  • Taobao Flexible technical solution
  • viewports
  • Heading for the Retina Web