Mobile front-end sharing: understanding of the page size of mobile devices (1)

Mobile front-end sharing: understanding of the page size of mobile devices (1)

Creating front-end pages for mobile devices will often encounter many confusing situations. In this article, I have sorted out some related concepts and methods to share with you.

Device pixel and CSS Pixel

Css pixels are fixed, and css pixels are stretched or reduced when scaled in the browser, and the pixels of devices remain unchanged.

100% zoom: css pixels are consistent with device pixels

Zoom: css pixels are scaled in device pixels.

Screen Size and window size

Good understanding of screen size and window size

However, note the following:The size of the window is changed when the window is scaled. This helps you understand the size of the mobile terminal later.

Explanation: When the page is enlarged, the window size becomes smaller. Why? Because the window size (window. innerWidth) is defined as the pixel width and height displayed in the window. The page is enlarged, and the css pixels displayed in the page are reduced. Therefore, the window size is reduced. On the contrary, when the page is reduced, the window size is increased.

Viewport on pc

Viewport is not a mobile terminal patent. viewport is a data inside the browser, which limits the width of html. The viewport is basically the same as the window size, so when you scale the window, the viewport will change, and the corresponding html width will also change.

In this example, because the page is enlarged, the viewport becomes smaller, and the blue css of the header in the page is set to 100%, which follows the viewport change. Therefore, the logo on the right is exposed, and the blue bars do not cover the document width of 100%, only the width of the viewport is used.

Mobile Terminal viewport

The viewport of a mobile terminal is more troublesome. There are two kinds of viewports: Display viewport (visual viewport) and layout viewport (layout viewport ).

The image above can be understood as follows:

A mobile phone is a magnifier that walks on the page. The width and height displayed on the mobile phone are visual-viewport, while the width and height of the entire page are layout-viewport.

Curious friends will ask, why is it so troublesome? This is because the cell phone is too small,"Mobile browser vendors want to provide their customers with the best possible experience, which now refers to" try to be the same as the desktop 」. Therefore, it is necessary to perform some tricks ."

So, if my page is not optimized, what is the default layout-viewport on the mobile phone,"How wide is layout viewport? Different browsers. Safari iPhone is 980px, Opera is 850px, Android WebKit is 800px, and IE is 974px ."

This is the reason why a normal page will become very large on the iphone. By default, the iphone sets the viewport of your page to 980px, that is, the default 100% width of html is 980px;