In-depth understanding of viewport,

In-depth understanding of viewport,
I have written this article as pdf. You are advised to download and browse it directly.

Link: https://pan.baidu.com/s/1c4cwd7E password: jty1

Understanding of viewport labels -- Copyright @ RYZZ

Https://www.cnblogs.com/ryzz/

Add this link if it is reproduced or referenced!

Preface: (required)

The front-end friends are more or less familiar with this label. There are a lot of explanations on this label on the Internet, but there is no doubt that they are plagiarized with each other.

This article is my own understanding of this label and the browser's webpage rendering mechanism (it may be incorrect, but at least I can tell you the reasons for the various situations of this label based on this understanding ).

We recommend that you use the mobile simulator of the Chrome developer tool to test the tag. This makes it easy to edit and preview the tag. Of course, all tests in this article have passed Android (Huawei P10) and iOS (iPhone 7) tested.

The article puts forward some custom concepts (double-underline representation). It is a good habit for you to summarize a concept in your learning.

If you have any mistakes in this article, please correct them, but do not use foul words. Thank you.

 

Directory:

 

I. Tag usage and attributes (P2)

Ii. Several professional terms (P3)

Iii. vp mechanism on PC and webpage Rendering Principle (P4)

Iv. Mobile Terminal vp mechanism and webpage Rendering Principle (P6)

 

 

Tag General Usage: (too many parameters are not required. I think users still need their own operation space. Of course, if you want to use HTML5 to develop a hybrid application, we recommend that you add the maximum, small scaling, and Disable User scaling)

<Meta name = "viewport" content = "width = device-width">

Attribute: (the role of each attribute is ignored, and Baidu has a bunch of features)

Width: a value (px) | device-width

The initial-scale range is (0.0, 10.0].

Minimum-scale same as above

Maximum-scale is the same as above

User-scalable "yes" | "no"

 

Several terms related to the screen (including cell phone screen, computer screen, tablet screen, etc:

(1) size (unit: inch, I .e., inch): the size of your mobile phone is several inches as the saying goes, and its size is the diagonal length of your mobile phone.

(2) Resolution (unit: px, I .e., pixel): indicates the width x height of your mobile phone. For example, the resolution of iPhone 7 is 750 x 1334px.

(3) pixel density (unit: dpi (dot per inch) or ppi (pixel per inch). Android is used to the former and apple is used to the latter ): the number of pixels in the diagonal line divided by the diagonal line length. For example, the iPhone7 ppi = √ (7502 + 13342)/4.7 ≈ 327.

(4) device pixel (unit: px): refers to the smallest unit that makes up the screen. For example, iPhone 7 has 750 device pixels at a level, sometimes referred to as pixels or points.

(5) device independent pixel (unit: dp): dip (device independence pixel) is a virtual pixel, and px in CSS is a device independent pixel, it ensures that the same value of the same device's independent pixel unit is almost the same size displayed on different devices. (If I have not made it clear, you can refer to Baidu for details)

(6) device pixel ratio (No unit, is a ratio): device pixel ratio (dpr) indicates the number of device pixels independent of a device on the device, for example, in the case of CSS in iPhone 7, 1px (this px is a unit of device independent pixels) = 2px (this px is a device pixel, that is, the pixel on iPhone 7 ). Use the window. devicePixelRatio attribute to obtain the number of pixels (device pixels) that a CSS pixel (device independent pixel) equals to on the device, that is, the device pixel ratio.

(7) viewport: vp for short. We do not translate it into Chinese. The following uses an image to describe it. (Because I think the translation will be misled Based on the surface meaning. If you have obsessive-compulsive disorder, I suggest you translate it into a "webpage rendering layer ")

 

 

Now let's take a look at the principles of web page rendering by browsers on the PC. This will help us understand what vp is and how mobile terminal layout works.

See: (the painting is a little abstract and should be understood as much as possible)

 

In the figure, there is a browser (the large rectangle with the URL address bar and three black ovles). In the browser, the light blue part is the window in which the browser displays the webpage (that is, the window, html and window overlap, but the body has 8 PX margin), while the light green is vp. This figure shows how the horizontal scroll bar slider looks at the page when the webpage is too wide (there is a black solid rectangle under the light blue, that is, the slider ).

 

If you do not know about the default layout between windows, html, and bodies, we recommend that you first look at it:

Note: html (Black Box) overlaps with window by default (if the border is removed). The body can actually be seen as a div element, the body should also be an exclusive line (where block-level elements are domineering), so the body of the red box is exclusive line (note that the body comes with margin: 8px, so it has margins with html), and then a Green Box div, also exclusive line.

 

 

Summary of how vp works on a PC browser:

On a PC, vp defaultsWindow(That isBrowser window, Which is equivalent to"The area where the browser can display the webpage"And"Visible area of the browser", These four terms are the same concept !) Overlap, that is, the default width and height of vp is the width and height of window.

Again, the minimum width of the webpage content: the minimum width that the webpage can normally display

<Style>

Div {float: left}

. A {width: 220px; height: 100px; background: yellow}

. B {width: 10%; height: 100px; background: red}

</Style>

<Body>

<Div class = "a"> </div> <div class = "B" </div>

</Body>

If the maximum browser window width is 0.1 PX (the current browser window width can be obtained through window. innerWidth), the minimum width of the webpage is px + px * = 320px.

 

If the minimum width of a webpage contentEqual to or lessWhen the width of the body, we call this layout a rational layout (if the sum of the minimum width of the elements in the body does not exceed the body, we do not need to move horizontally when looking at the page, you can simply browse from the top to the bottom, and browsing is very easy and user-friendly, so it is called a reasonable layout). Otherwise, ifExceedsBody width (this is called an abnormal layout), the vp width is forced to be enlarged until the minimum width of the webpage content is wrapped, and then placed in the browser window, the horizontal scroll bar appears at the bottom. As mentioned above, if the webpage content is at least as large as the body, there will be a horizontal scroll bar, then if the webpage content is high (in general, the percentage is not set when the webpage element is high) higher than vp (vp's height is the current window's height by default, as mentioned earlier), a vertical scroll bar will appear. (The height of the body is not broken as wide)

That is to say, the Web pages are rendered to the vp, and then the vp is displayed to the user in the browser window.

 

 

Finally, let's talk about the web page Rendering Principle of mobile browsers: (taking iPhone 7 as an example)

When the viewport label is not added, the vp width of iPhone 7 defaults to 980px, and the height defaults to 1744px. (This vp's width to height ratio is the resolution to width ratio of the iPhone 7, which is about 0.56. However, this should be different from the vp on the PC end. The height and width of the vp on the PC end are not proportional !) At this time, the content of the webpage will be added to the body of the 980px-wide vp (the body on the mobile phone still has an 8px margin), just like on the PC end, generally, the content of a webpage does not exceed the body (that is, a reasonable layout). After the webpage is rendered in the vp, the vp is reduced.So that the height of the vp is the same as that of the visible area of the mobile browser.So you generally click to open a website that has not been optimized on the Mobile End to be a scaled-down webpage. But what if the webpage is an abnormal layout? That is to say, if the minimum width of the webpage content exceeds the body, the vp will be forced to zoom in (same as that of the PC end) to the minimum width of the webpage content that just wraps the webpage, and the vp will be greater than 980px, how can I scale the mobile browser? In the same way, the abnormal layout only affects the width of the vp and does not affect the height of the vp. Therefore, it is reduced to the height of the vp and the window of the mobile browser (the window is used here, that is, the window, it is also equivalent to the visible area of the browser. Don't confuse it. The height of the same thing is the same as that mentioned above. This means that there will be a horizontal scroll bar at the bottom of the mobile browser, it is used to slide to see the excess parts (that is, the abnormal layout beyond the body ).

Abstract? See:

 

The rectangle A indicates the mobile browser window, and the iPhone 7 is 375px.

Rectangle B indicates the default vp of iPhone 7

The rectangle C represents an abnormal layout webpage, which is at least wider than the vp width. Therefore, the default vp width is enlarged to the minimum width of the webpage, as shown by the Red Arrow ), however, the height of the vp is not amplified (the rectangle size of the red box is changed ). At this time, the webpage with an abnormal layout is rendered in vp, and then it will be placed in the window, which will be reduced until the height of vp is the same as the height of the window, so there will be a problem, the content of the webpage with an abnormal layout that exceeds the body (that is, the default vp width) is displayed outside the window, so there is no scroll bar in the browser.

 

If there are so many things, what about adding the viewport tag? Is this simple?

If it is set to width = device-width, the default vp is scaled to the window width. (Note that the width and height of the vp are restricted. When the zoom width is used, the height is also scaled. When the zoom height is used, the width is also scaled, except for the layout exceptions mentioned above, the vp will overlap with the window. Therefore, if it is a webpage with a reasonable layout, it is displayed as a very standard mobile optimized webpage. On the contrary, if it is an abnormal layout, the vp will not be reduced, because the vp height is already the same as the window height, but the vp width needs to wrap the minimum width of the webpage with abnormal layout, therefore, the vp width is greater than the value specified by device-width (375px on iPhone 7), so a horizontal scroll bar is added. Similarly, the width and height of the vp of a webpage with an abnormal layout will not be proportional, because its width is forced to scale.

If the configured width is greater than the device-width, for example, a 500px value is set, the vp width is 500px, and the higher proportion is increased to 585 * (500/375) = px. (The vp height when 585px is width = 375px) isn't the web page rendering principle the same as without viewport? A reasonable layout reduces the vp so that the vp height is equal to the window height. An abnormal layout increases the vp width, but the vp height does not increase proportionally (because the vp width is forced to increase ), the vp is reduced so that the vp height is equal to the window height and a horizontal scroll bar is displayed.

If the configured width is smaller than the device-width, for example, if a 200/375 px value is set, the vp width and height are 585 px × (*) px, and then whether the layout is reasonable, if yes, proportional amplification makes the vp height equal to the window height. If not, the vp width is increased, and then the proportional amplification makes the vp height equal to the window height. Similarly, A horizontal scroll bar is displayed.

 

January 31, 2018