The basic principles and detailed usage of viewport

1. Overview of viewport

Mobile browsers usually render pages in a virtual window that is wider than the screen. This virtual window is the viewport. The purpose of this virtual window is to display web pages that are not adapted for mobile devices properly so that they can be fully displayed to users. Sometimes when we use a mobile device to access a desktop version of a web page, we will see a horizontal scroll bar. The width of the displayable area here is the width of the viewport.

For normal use, the page can be scaled using the following code

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

If you don't want the page to zoom, 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

When developing desktop web pages, 1px in CSS is equal to 1px on the device; however, 1px in CSS is just an abstract value and does not represent the actual number of pixels; and in mobile devices, the pixel density of different devices is different, and 1px in CSS may not be equal to a pixel value of a real device. User zooming will also change how many device pixels 1px represents in the CSS. This ratio is devicePixelRatio

Physical pixel / independent pixel = devicePixelRatio
We can zoom in the browser and print window.devicePixelRatio in the console to view the size of devicePixelRatio. The independent pixels here can be understood as px in CSS.

3. Viewport Basics

Code:

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

The following are several properties of viewport. These properties can be used in combination. Multiple properties should be separated by commas. Here we develop a concept called ideal viewport, which refers to the viewport under ideal conditions. Users can view all the contents of the webpage normally without zooming or scrolling horizontally, and can see all the text clearly, no matter how small the text is defined in CSS.

4. Advanced viewport

1.width and initial-scale
When width and initial-scale are set, the browser will automatically select the largest value for adaptation. If you set:

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

The browser will choose the larger value for adaptation. If the ideal viewport width of the current window is 300 and the initial-scale value is 1, the value of width is 400; if the ideal viewport of the current window is 480, 480 is taken.

In fact, width=device-width and initial-scale=1 both represent the ideal viewport for application. However, on mobile devices such as iPad and iPhone and IE, the width of the vertical screen is used by default, regardless of the horizontal or vertical screen. The most compatible way to write it is

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

2. Dynamically change properties

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');

Viewport concept

Mobile browsers usually render pages in a virtual window that is wider than the screen. This virtual window is the viewport. The purpose of this virtual window is to display web pages that are not adapted for mobile devices properly so that they can be fully displayed to users. Sometimes when we use a mobile device to access a desktop version of a web page, we will see a horizontal scroll bar. The width of the displayable area here is the width of the viewport.

The difference between pixels and device pixels in CSS

When developing desktop web pages, 1px in CSS is equal to 1px on the device; however, 1px in CSS is just an abstract value and does not represent the actual number of pixels; and in mobile devices, the pixel density of different devices is different, and 1px in CSS may not be equal to a pixel value of a real device. User zooming will also change how many device pixels 1px represents in the CSS. This ratio is devicePixelRatio

Physical pixel / independent pixel = devicePixelRatio

We can zoom in the browser and print window.devicePixelRatio in the console to view the size of devicePixelRatio. The independent pixels here can be understood as px in CSS.

Viewport Basics <br /> A typical mobile-optimized site contains something like this:

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

The following are several properties of viewport. These properties can be used in combination. Multiple properties should be separated by commas. Here we develop a concept called ideal viewport, which refers to the viewport under ideal conditions. Users can view all the contents of the webpage normally without zooming or scrolling horizontally, and can see all the text clearly, no matter how small the text is defined in CSS.

Advanced viewport

1.width and initial-scale
When width and initial-scale are set, the browser will automatically select the largest value for adaptation. If you set:

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

The browser will choose the larger value for adaptation. If the ideal viewport width of the current window is 300 and the initial-scale value is 1, the value of width is 400; if the ideal viewport of the current window is 480, 480 is taken.

In fact, width=device-width and initial-scale=1 both represent the ideal viewport for application. However, on mobile devices such as iPad and iPhone and IE, the width of the vertical screen is used by default, regardless of the horizontal or vertical screen. The most compatible way to write it is

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

2. Dynamically change properties

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 ends here. You can choose according to your needs. Generally speaking, PC and mobile devices without adaptation can use those that do not support scaling. If you jump to the mobile terminal and can scale, there will be no impact.