Mobile browsers usually render pages in a virtual window that is wider than the screen. This virtual window is viewport. The purpose is to display web pages that are not adapted to the mobile terminal normally, so that they can be fully displayed to users. Sometimes when we use mobile devices to access the desktop web page, we will see a horizontal scroll bar, and the width of the display area here is the width of the viewport.
Regularly, if the page can be scaled, use the following code
<meta name=viewport content=width=device-width, initial-scale=1 />
If you don't want to zoom in, use the following code
2. The difference between pixels and device pixels in css<meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no>
When developing desktop web pages, 1px in css is 1px on the device; however, 1px in css is just an abstract value, which does not represent the actual pixels; while in mobile devices, the pixel density of different devices is different, and 1px in css may not be equal to a pixel value of the real device. User scaling will also change how many device pixels 1px in css represent. This ratio is devicePixelRatio
Physical pixels/independent pixels = devicePixelRatio
We can zoom in the browser and print window.devicePixelRatio in the console to see the size of devicePixelRatio. The independent pixels in it can be understood as px in css.
3. Viewport basicsCode:
<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 a mixed manner. Multiple properties should be separated by commas at the same time. Here we expand a concept called ideal viewport, which refers to the viewport under ideal circumstances. It can view all the content of the web page normally without user scaling and horizontal scrolling bars, and can see all text clearly. No matter how small this text is defined in CSS, it can be seen clearly when displayed.
| property | describe |
|---|---|
| width | Controls 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 and rarely used. |
| initial-scale | Control the zoom level under idealviewport when the page is initially loaded, usually set to 1, which can be a decimal |
| maximum-scale | Allows the maximum scaling value of the user to be a number and can be decimal |
| Minimum-scale | Allows the minimum scaling value of the user to be a number, which can be taken with decimals. |
| user-scalable | Whether the user is allowed to scale, the value is no or yes, no means not allowed, yes means allow |
1.width and initial-scale
When width and initial-scale are set, the browser will automatically select the largest value for adaptation. As set:
<meta name=viewport content=width=400, initial-scale=1>
The browser will select a large value to adapt. If the width of the current window's ideal viewport is 300 and the initial-scale value is 1, the value of width is 400 is obtained; if the ideal viewport of the current window is 480, 480 is selected.
In fact, width=device-width and initial-scale=1 both represent the application of ideal viewport, but on mobile devices such as iPad and iPhone and IE, horizontal and vertical screens are not distinguished, and the width of the vertical screen is taken by default. The best way to write compatibility is
<meta name=viewport content=width=device-width, initial-scale=1>
2. Dynamically change attributes
a. document.write()
document.write('<meta name=viewport content=width=device-width,initial-scale=1>')
b.setAttribute
viewport conceptvar mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
Mobile browsers usually render pages in a virtual window that is wider than the screen. This virtual window is viewport. The purpose is to display web pages that are not adapted to the mobile terminal normally, so that they can be fully displayed to users. Sometimes when we use mobile devices to access the desktop web page, we will see a horizontal scroll bar, and the width of the display area here is the width of the viewport.
Difference between pixels and device pixels in cssWhen developing desktop web pages, 1px in css is 1px on the device; however, 1px in css is just an abstract value, which does not represent the actual pixels; while in mobile devices, the pixel density of different devices is different, and 1px in css may not be equal to a pixel value of the real device. User scaling will also change how many device pixels 1px in css represent. This ratio is devicePixelRatio
Physical pixels/independent pixels = devicePixelRatio
We can zoom in the browser and print window.devicePixelRatio in the console to see the size of devicePixelRatio. The independent pixels in it can be understood as px in css.
Viewport basicsA typical mobile-optimized site contains content similar to the following:
<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 a mixed manner. Multiple properties should be separated by commas at the same time. Here we expand a concept called ideal viewport, which refers to the viewport under ideal circumstances. It can view all the content of the web page normally without user scaling and horizontal scrolling bars, and can see all text clearly. No matter how small this text is defined in CSS, it can be seen clearly when displayed.
| property | describe |
|---|---|
| width | Controls 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 and rarely used. |
| initial-scale | Control the zoom level under idealviewport when the page is initially loaded, usually set to 1, which can be a decimal |
| maximum-scale | Allows the maximum scaling value of the user to be a number and can be decimal |
| Minimum-scale | Allows the minimum scaling value of the user to be a number, which can be taken with decimals. |
| user-scalable | Whether the user is allowed to scale, the value is no or yes, no means not allowed, yes means allow |
1.width and initial-scale
When width and initial-scale are set, the browser will automatically select the largest value for adaptation. As set:
<meta name=viewport content=width=400, initial-scale=1>
The browser will select a large value to adapt. If the width of the current window's ideal viewport is 300 and the initial-scale value is 1, the value of width is 400 is obtained; if the ideal viewport of the current window is 480, 480 is selected.
In fact, width=device-width and initial-scale=1 both represent the application of ideal viewport, but on mobile devices such as iPad and iPhone and IE, horizontal and vertical screens are not distinguished, and the width of the vertical screen is taken by default. The best way to write compatibility is
<meta name=viewport content=width=device-width, initial-scale=1>
2. Dynamically change attributes
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');
Okay, this article has been introduced to you. You can choose according to your own test needs. Generally speaking, PC and mobile phones can be used without adaptability and do not support scaling. If you jump to the mobile phone, you can scale without any impact.