HTML5 mobile terminal-detailed explanation of viewport

Everyone has encountered the problem of viewport on the mobile page. There are many articles about viewport. I recommend these two articles to everyone, which are very detailed.

This article makes some additions to the viewport

Mobile screen

The mobile screen is a hardware attribute, and we cannot affect it whether through JS or meta tags .

• The physical pixels of the mobile phone screen are what mobile phone manufacturers call pixels, resolution, and PPI.

Common Android ones are 720X1280, 1080X1920, etc.
iPhone is iPhone5 640X1136, iPhone6 ​​750X1334, iPhone6P 1080X1920

• Mobile screen logic Pixel, the number of pixels after physical pixel conversion. That is the size of the ideal viewport

The iPhone5 screen was originally 640px wide, but it was converted into 320px
iPhone6 ​​physical pixels 750px Model, converted to 375px
iPhone6P is a little weird, the physical pixels are actually 1080px wide, but the system exposed to the outside is indeed 1242px, and then converted to 414px

screen.width/height You can get the logical pixels of the screen

Layout viewport layout viewport

The physical pixels and logical pixels of the screen just mentioned, these are mobile phones We cannot set it up after the manufacturer has set it up. The focus is on the next two viewports, so don’t confuse them.

layout viewport is equivalent to the width of the browser.
We can set it through .
By default, the layout viewport is generally 980px wide.

document.documentElement.clientWidth You can get the width of the layout viewport.

Visual viewport visual viewport

The visual viewport can be regarded as a window as large as the mobile phone screen, but the number of pixels it can display is not so many logical pixels on the screen.

The visual viewport is not easy to understand, although the logical pixels of the mobile phone screen have been fixed, for example, the iPhone5 is 320px.

But the screen is 320px wide, but it can display 980px wide content, so the width of the visual window is 980px.
Many web pages that have not been adapted to mobile devices. When we open them on mobile phones, we find that the web pages are reduced to the width of the mobile phone screen.

The key point is scaling. Zooming allows the 320px screen to display more content.
window.innerWidth You can get the width of the visual viewport.

The width of the visual viewport can be set through .
The width of the visual viewport is screen.width / initial-scale
At the same time, it will also affect the width of the layout viewport, because the width of the layout viewport is always greater than or equal to the width of the visual layout.

如果不设置 initial-scale ，iOS设备会自动将 visual viewport 缩放到 布局视口一样大。

Remember how wide the default layout viewport is?

The relationship between screen logical pixels, layout viewport, and visual viewport

<meta name="viewport" content="width=device-width">

Set the width of the layout viewport to the screen width

<meta name="viewport" content="width=640">

Set the layout viewport The width is set to 640px (logical pixels, not physical pixels)

<meta name="viewport" content="initial-scale=0.5">

Set the visual viewport to 2 times the screen width (the correct understanding is: 0.5 times the visual viewport is the screen width, so visual The width of the viewport is twice the screen width)

At this time, the width of the layout viewport is also twice the screen width, instead of the default 980px

Summary:

1、默认情况下 layout viewport 为 980px
2、width=x 设置布局视口，initial-scale=y 设置视觉视口
3、如果只设置 布局视口 和 视觉视口 中的一个，那么另一个也是同样的宽度
4、布局视口 的宽度始终大于等于 视觉视口

For example, iPhone 5 above

<meta name="viewport" content="width=600,initial-scale=0.5">

So how wide are the visual viewport and layout viewport respectively?

Finally, we have finally reached the familiar

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

Everyone knows what this means.
layout viewport browser window, set to the screen width.
Visual viewport is also set to the screen width, without scaling, and how many pixels are displayed as wide as the screen is.
This is the so-called perfect viewport.

The above is the detailed content of HTML5 mobile terminal-detailed explanation of viewport. For more information, please follow other related articles on the PHP Chinese website!