The basic principle and detailed usage of viewport

Time:2020-1-14

1、 Overview of viewport

Mobile browsers usually render pages in a virtual window wider than the screen. This virtual window is the viewport. The purpose is to normally display the web pages that are not adapted to the mobile terminal, so that they can be fully displayed to users. Sometimes when we use mobile devices to visit desktop pages, we will see a horizontal scroll bar, where the width of the display area is the width of the viewport.

In general, the page can be zoomed using the following code

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

If you don’t want to zoom the page, use the following code

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>

2、 The difference between pixels in CSS and device pixels

In the development of desktop web pages, 1px in CSS is 1px on the device; however, 1px in CSS is only an abstract value, which does not represent the actual number of pixels; while in mobile devices, the pixel density of different devices is different, and 1px in CSS may not equal a pixel value of the real device. User scaling also changes how many device pixels 1px in CSS represents. This ratio is devicepixel ratio

Physical pixel / independent pixel = devicepixelratio
We can zoom in and out in the browser, and print window.devicepixelratio in the console to see the size of devicepixelratio. The independent pixels can be understood as PX in CSS.

3、 Viewport base

Code:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

The following are several properties of viewport, which can be used in a mixed way. Multiple properties used at the same time should be separated by commas. Here we expand a concept called ideal viewport, which refers to the ideal viewport. Without user zoom and horizontal scroll bar, you can normally view all the content of the web page and see all the text clearly. No matter how small the text is defined in CSS, it can be seen clearly when it is displayed.

attribute describe
width Control the width of the viewport, you can specify a number, or set device width to specify
height Control the height of the viewport. This property is not very important. It is rarely used
initial-scale Controls the scaling level of the page when it is initially loaded under the idealviewport, usually set to 1, which can be a decimal
maximum-scale The maximum zoom value allowed for the user, which is a number and can be decimal
minimum-scale The minimum scale value allowed for the user, which is a number and can be decimal
user-scalable Allow users to zoom or not. The value is “no” or “yes”. No means not allowed, and yes means allowed

4、 Viewport advanced

1. Width and initial scale
When width and initial scale are set, the browser will automatically select the maximum value for adaptation. Set up:

<meta name=”viewport” content=”width=400, initial-scale=1″>

The browser will select a large value for adaptation. If the width of the current window’s ideal viewport is 300 and the initial scale value is 1, the width is 400; if the current window’s ideal viewport is 480, the width is 480.

In fact, width = device width and initial scale = 1 both represent the application of ideal viewport, but on mobile devices such as iPad, iPhone and ie, the horizontal and vertical screens are not separated, and the vertical screen width is taken by default. The best way to write compatibility is

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

2. Changing attributes dynamically

a. document.write()

document.write(‘<meta name=”viewport” content=”width=device-width,initial-scale=1″>’)

b.setAttribute

var mvp = document.getElementById(‘testViewport’);
mvp.setAttribute(‘content’,’width=480′);

Concept of viewport

Mobile browsers usually render pages in a virtual window wider than the screen. This virtual window is the viewport. The purpose is to normally display the web pages that are not adapted to the mobile terminal, so that they can be fully displayed to users. Sometimes when we use mobile devices to visit desktop pages, we will see a horizontal scroll bar, where the width of the display area is the width of the viewport.

The difference between pixels in CSS and device pixels

In the development of desktop web pages, 1px in CSS is 1px on the device; however, 1px in CSS is only an abstract value, which does not represent the actual number of pixels; while in mobile devices, the pixel density of different devices is different, and 1px in CSS may not equal a pixel value of the real device. User scaling also changes how many device pixels 1px in CSS represents. This ratio is devicepixel ratio

Physical pixel / independent pixel = devicepixelratio

We can zoom in and out in the browser, and print window.devicepixelratio in the console to see the size of devicepixelratio. The independent pixels can be understood as PX in CSS.

Viewport Foundation
A typical mobile optimized site includes the following contents:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
 

The following are several properties of viewport, which can be used in a mixed way. Multiple properties used at the same time should be separated by commas. Here we expand a concept called ideal viewport, which refers to the ideal viewport. Without user zoom and horizontal scroll bar, you can normally view all the content of the web page and see all the text clearly. No matter how small the text is defined in CSS, it can be seen clearly when it is displayed.

attribute describe
width Control the width of the viewport, you can specify a number, or set device width to specify
height Control the height of the viewport. This property is not very important. It is rarely used
initial-scale Controls the scaling level of the page when it is initially loaded under the idealviewport, usually set to 1, which can be a decimal
maximum-scale The maximum zoom value allowed for the user, which is a number and can be decimal
minimum-scale The minimum scale value allowed for the user, which is a number and can be decimal
user-scalable Allow users to zoom or not. The value is “no” or “yes”. No means not allowed, and yes means allowed

Viewport advanced

1. Width and initial scale
When width and initial scale are set, the browser will automatically select the maximum value for adaptation. Set up:

<meta name=”viewport” content=”width=400, initial-scale=1″>

The browser will select a large value for adaptation. If the width of the current window’s ideal viewport is 300 and the initial scale value is 1, the width is 400; if the current window’s ideal viewport is 480, the width is 480.

In fact, width = device width and initial scale = 1 both represent the application of ideal viewport, but on mobile devices such as iPad, iPhone and ie, the horizontal and vertical screens are not separated, and the vertical screen width is taken by default. The best way to write compatibility is

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

2. Changing attributes dynamically

a. document.write()

document.write(‘<meta name=”viewport” content=”width=device-width,initial-scale=1″>’)

b.setAttribute

var mvp = document.getElementById(‘testViewport’);
mvp.setAttribute(‘content’,’width=480′);

Well, this article introduces that you can choose according to your own needs. Generally speaking, the PC and the mobile can use the one that does not support scaling without adaptation. If you jump to the mobile end, you can scale without any influence.

Recommended Today

The basic syntax and function of triggers in SQLSEVER

What is a trigger? Triggers are stored procedures that are executed automatically when a table is inserted, updated, or deleted. A special stored procedure that is automatically executed when a trigger inserts, updates, or deletes a table. Triggers are generally used for more complex check constraints. The difference between a trigger and a normal stored […]