html5 viewport summary

This article is about viewport in HTML5. For students who are not familiar with viewport in HTML5, we can take a look at this article together! Let’s take a detailed look at the viewport in html5

To sum up, it just revolves around three questions:
1. Why set up a virtual window
Initially, it was to make the resolution of the virtual window close to that of the PC. In this way, the virtual window can still fully display the page content, but the page content is relatively small, and you need to manually zoom to see the page clearly.
2. What is the use of adding viewport
Adding viewport is to facilitate the optimization of the mobile terminal. Set the virtual window width to device-width, which is the same as the physical pixels of the device, so that we can control the display mode of the page mobile interface through media.
3. The relationship between the device screen width (that is, the physical pixels of the device) and the resolution
Taking the iPhone 6 as an example, the actual screen size is 375*667, but its resolution reaches 750*1334. The two are Different concepts.
Physical size refers to the actual size of the screen. A large screen must also be equipped with high resolution, that is, how many pixels can be displayed at this size. The more pixels displayed, the greater the room for expression. The screens of the two mobile phones are about the same size, but one can only display two lines of Chinese characters, while the other can display five lines of Chinese characters. Regardless of the difference in font size, the key is the resolution of the screen. The latter has a larger resolution, so naturally the same font can be used. More lines of Chinese characters can be displayed under different sizes. Color-screen mobile phones are indeed good, but without a large enough resolution screen performance, no matter how high the color quality is, what's the use.

---

Let’s explain the role of viewport and how it is combined with media.
A 50-pixel-wide p may be just right when displayed on a PC browser, but it will appear too large if displayed on a mobile browser. How to solve this problem? Apple found a way: it defined the viewport meta tag in the mobile version (iOS) of Safari. Its function is to create a virtual window (viewport), and the resolution of this virtual window is close to that of the desktop monitor. Apple positioned it is 980px. That is, when I open any page in the browser, the width of this page is 980px, not the physical width of the screen.
Taking Safari under the iPhone 6 as an example:
On the 375px physical screen of the iPhone 6 - visual viewport, a 980px virtual window - layout viewport (layout viewport) is created. In the visual window ( In the visual viewport), we can drag the horizontal and vertical slide bars or zoom in and out of the web page to achieve the best browsing effect (similar to a desktop browser); and the layout viewport is used to cooperate with CSS rendering layout, for example, when we set When the width of a container is 100%, the actual value of the container is 980px instead of 375px. In this way, most web pages can be displayed normally on the mobile phone screen in a zoomed form.

What is the actual size of the virtual window 980px on the screen?
The physical pixels of the iPhone 6 screen are 375px, and the width of the virtual window is 980px. The 1px size of the two is not to wait. To put it more simply, this px is not that px. One is used to describe the size of the actual window, that is, the visual window. One is used to describe the size of the virtual window, which has nothing to do with it. (You can use chromn to check the width of the page in PC browsers and mobile browsers.)

• The virtual window sizes of safari browser, opera browser, and chromn browser are all 980px by default. FirefoxThe mobile mode is enabled by default, and its virtual window width is the device width.

  After the smart phone creates a virtual window, another problem arises. After the PC web page is opened in the mobile browser, both the font and other elements appear relatively small, which makes it look difficult. Manual scaling seems more troublesome. Apple has also created a viewport to adjust the size of the virtual window. Generally, we will write

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

device-width to set the size of the virtual window to be equal to the physical pixel width of the device. This makes it easier for us to use media to write a page specifically adapted to the mobile terminal, so that we can see a page of the appropriate size on the mobile terminal.

The above is the detailed content of html5 viewport summary. For more information, please follow other related articles on the PHP Chinese website!