Analysis of the relationship between viewport and related attributes (picture)

The content of this article is about the analysis (picture) of the relationship between viewport and related attributes. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Without further ado, let’s get to the point

Children’s shoes who have a general understanding of viewport should know that there are three types of viewport

1. Layout viewport (layout viewport)

2. Visual viewport

3. ideal viewport

corresponding There are 5 related properties

1. width: Set the width of the layout viewport to a specific value

2. initial-scale: Set the initialization of the page The zoom level and width of the layout viewport.

3. minimum-scale: Set the minimum zoom level

4. maximum-scale: Set the maximum zoom level

5. user-scalable: Whether to prevent users from zooming

##Why there is no ideal window: Because the ideal window is the browser It is normal for the ideal window defined by yourself to be inconsistent on different browser devices.

Layout viewport

The usual width for mobile devices is between 240 and 640 pixels, but many desktop websites The width is all above 800 pixels. A 35% sidbar looks normal on a desktop, but will be very narrow on a mobile phone. To solve this problem. Many mobile browser manufacturers design the viewport width to be much wider than the screen size, ranging from 768 to 1024, but the common width is 980px.

The picture below shows the width corresponding to the mobile terminal when viewport meta is not added (it is also 980 on iPhone 8p)

When the browser encounters a website that is not mobile-optimized, the browser will shrink the website as much as possible so that the user can see the entire website.

The width in the viewport meta is used to set the layout viewport. In addition to the common device-width, it can also be set to a fixed value, such as 600.

CSS layout is calculated based on the layout viewport and is constrained by it.

As shown below, the width of the pink bar is based on 600 * 30% = 180

initial- Scale is also used to set the layout viewport, which is different from minimum-scale and maximum-scale.

Layout viewport width = ideal viewport width/initial-scale, so the width of the layout viewport in the picture below is equal to 106

Visual Viewport

The visual viewport refers to the area of ​​the website that the user is seeing. Users can operate the visual window by zooming,

At the same time, the layout window will not be affected

Under normal circumstances, the visual window is not important to developers, but if it is really needed, you can use window. innerWidth/Height can get the current visually palatable value (there will be problems with Android webkit2 and proxy browsers)

Ideal viewport

When talking about the layout window, it was mentioned that the default width of the layout window is generally around 980 to adapt to the width of the desktop web page, but this is not an ideal width on the mobile side, so browser manufacturers have introduced the ideal viewport the concept of.

The ideal viewport is the most ideal

layout viewport size for the device, with the most ideal width for browsing and reading.

The ideal viewport is

defined by the browser and is not a function of the device or operating system. So different browsers on the same device may have different ideal fit widths. The ideal viewport width will change as the device changes (the exception is early Safari, which can be solved with initial-scale=1. I just tried it with iPhone 8p, and the ideal viewport will automatically change after rotating the device)

The following two methods can set the width of the layout window to the width of the ideal window, but the first method will not change after the device is rotated in early Safari, and the second method will have an incorrect width under IE 10, so The third type is the perfect mata viewport

<meta>

<meta>

<meta>

All scaling is based on the ideal viewport width

Maximum-scale and minimum-scale are determined based on the ideal window, and The width of the layout window does not matter.

In the picture below, the ideal viewport width is 320px, and the layout viewport is set to 160px. The screenshot is when I zoomed in to the maximum, and the width of the corresponding visual window is 32px (the width of 2 pinks), which is the ideal viewport width. /10 times the width

The above is the detailed content of Analysis of the relationship between viewport and related attributes (picture). For more information, please follow other related articles on the PHP Chinese website!