The last two posts have clarified the concept of pixels and viewports. Now, set the ViewPort with the meta tag.

Meta tags

The content in the meta tag provides meta information about the HTML page. Basically, you use this information to tell the browser how to parse the HTML file. Such as

<meta charset="utf-8">
Copy the code

This tag tells the browser that the character encoding of the HTML file is UTF-8. When the browser parses the HTML file, it gets this information because the meta tag is in the header. The browser then uses the UTF-8 encoding to parse the characters in the HTML file.

Of course, in addition to the simple format above, the meta tag is more common in the name + content form:

<meta name="format-detection" content="telephone=no" />
Copy the code

The value of the name attribute tells the browser that the meta tag is set to formatt-detection and that the value of the meta tag is telephone=no in the content, that is, the number is ignored as a phone number.

The setting of the viewport

As mentioned at the end of the last blog post, the adaptation is to resize the Layout ViewPort, and we can resize the Layout ViewPort with the meta tag. Go online and search for mobile adaptation and you’ll see the following code:

<meta name="viewport" content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Copy the code

Let’s start with these attributes:

The property name instructions
width Set the layout ViewPort width to a positive integer or the string width-Device
initial-scale Sets the initial zoom value of the page to a number, possibly with a decimal
minimum-scale The minimum zoom value allowed to the user is a number, which can be a decimal
maximum-scale The maximum zoom value allowed to the user is a number, which can be a decimal
height Set the height of the Layout ViewPort. This property is not important to us and is rarely used
user-scalable Whether to allow users to zoom in and out. The value is “no” or “yes”, where “no” means “no” and “yes” means “yes”
target-densitydpi The value can be a value or one of the following characters: high-dPI, medium-dpi, low-dpi, and device-dpi. Android supports that when target-densitydpi=device-dpi, 1px in CSS will be equal to 1px in physical pixels.

Going back to the application scenario, the main purpose of using this tag is for mobile adaptation, usually to create a page specifically designed for mobile. So when we set a Layout ViewPort, we want the viewPort to be the same size as the Ideal ViewPort.

Now that the requirements are clear, let’s see how we can implement them using the properties in the table above.

Using the width

<meta name="viewport" width="device-width">
Copy the code

Width is used to set the width of the Layout ViewPort. We set it to device-width, which is the actual width of the device. The ideal ViewPort width is equal to the width of the device, so this code sets the ViewPort to the ideal ViewPort size. Can use window respectively. The innerWidth and document. Document. ClientWidth view:

Of course, you can set it to something else if you want, like 1000, and layout ViewPort will be larger than Visual ViewPort, and you’ll have a scroll bar when you browse. When implemented, it is best to add initial-scale=1.0 to the code to prevent the browser from zooming the page.

Using the scale

<meta name="viewport" initial-scale="1.0">
Copy the code

Initial-scale sets the size of the Layout ViewPort relative to the Ideal ViewPort when the page is first loaded. The specific calculation formula is as follows:

layout viewport = ideal viewport / scale
scale = ideal viewport / layout viewport
Copy the code

Note that with the scale setting, the browser automatically scales the layout ViewPort to the same size as the Visual ViewPort without a scroll bar. In the following example, we set the red box size to 100x100px and the font size to 32px.

Initial – scale = 1.0

Set scale to 1.0 and the layout ViewPort size equals the Ideal ViewPort size:

The size of the red box is 100px and the font size is 32px.

Initial – scale = 0.5

Set the scale to 0.5 and the Layout ViewPort is twice the ideal ViewPort size (750px) :

However, the browser will scale the Layout ViewPort to match the Visual ViewPort size. For a Layout viewPort that is already Visual ViewPort 750px, you need to scale it by 0.5 times to fit 375px. As a result, a 100px red box will look only 50px in size and the font will be halved in size. If the size of the design is 750px, then the size of the style can be written exactly as the design. If the scale is set to 0.5, the visual effect will be reduced.

The size of the visual ViewPort printed with window.innerWidth is incorrect. The size of the Visual Viewport printed with screen.width is correct. If you know, please leave a comment in the comments section

Initial – scale = 2.0

Set scale to 2 and the layout ViewPort is half the size of the Ideal ViewPort (188px) :

Again, the browser will automatically zoom. The original 188px layout ViewPort needs to be enlarged twice to fill the Visual ViewPort. At this point, the 100px red box will be enlarged to 200px and the font size will be enlarged to 64px.

At the same time use

Width and scale can be implemented either way, but compatibility is different. Our goal is to set the Layout ViewPort under the Ideal ViewPort. In order to be compatible with all devices, we have the following solution:

<meta name="viewport" content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Copy the code

If they are not the same size, the larger is chosen. Setting width to device-width and scaling to 1 completely limits the layout ViewPort size to visual ViewPort. All the other properties, they control scaling. In fact, maximum-scale=1.0, minimum-scale=1.0 is equivalent to user-scalable=no. If scaling is disabled, the viewPort size of a layout will change during scaling.

summary

The purpose of viewPort is to set the size of the layout viewPort so that it can be displayed properly on mobile devices.