preface

Have done for a period of time mobile TERMINAL H5 application, adaptation scheme is basically Flexible, occasionally also use viewport unit, but for the mobile terminal adaptation of some concepts and the nature of the implementation is still in a half-understanding degree.

It’s like, you know, you can drive a car, but you don’t know how the inside of the car works, and when the car breaks down, you have to ask for help, because you don’t have the ability to fix it, and that makes me very insecure.

So recently, I spent some time, read some articles and wrote some demos, and finally got a clear picture of this place.

1. Pixel units

First, let’s distinguish a few different units of measurement for pixels, which is an important point.

1. Physical Pixels

Physical pixels, also known as device pixels, are the actual physical parts of the display screen, and if you look at some old TVS from a distance, you can see that the whole picture is made up of dots of different colors, and these dots are called physical pixels.

In mobile devices, there are two specification attributes, one is resolution, the other is PPI, take iPhone11 for example

1792 X 828 refers to the number of physical pixels on the screen in both vertical and horizontal directions.

PPI, on the other hand, refers to the number of physical pixels Per Inch, and the larger the value, the sharper the screen will be to our senses.

2. Density independent Pixel

Device-independent pixels are abstract units. The value we get from screen.width/height is measured by device-independent pixels, and is generally considered equivalent to the CSS pixels we set.

Take the iphone6 for example, its screen width is 375px (device-independent pixels), then we give an element CSS pixel width of 375px, this element will cover the entire screen of the phone.

However, if you zoom in the browser, the situation will be different, which will be explained below.

3. The CSS pixels

This is the pixel unit that we use to write CSS styles.

4. Device pixel ratio

One term you hear a lot, Device Pixel Ratio, or DPR, is the ratio of physical pixels to individual pixels on the device.

There are two ways to get it,

One is window.devicePixelRatio, and the other is min-device-pixel-ratio of CSS media query

2. The viewport viewport

There are three kinds, respectively layout viewport, visual viewport, ideal viewport, figure out the difference between these three, basically also understand the whole mobile terminal adaptation and the display of the web page.

1. Layout ViewPort

In terms of layout viewports, the width of the viewport may be larger than the width of the browser viewport, so we can only scroll through it. A picture is worth a thousand words. Let’s take a look at this image first.

It is our web site a benchmark window, our HTML page width height is based on the calculation of the viewport, layout can be invoked by the document. The documentElement. ClientWidth/clientHeight to get layout viewport size, unit of measure is the CSS pixels.

In PC browsers, it is the size of the browser’s document window.

On mobile devices, however, the width will be set to a default value (no meta Viewport tags in HTML code) of 980px for the most part, and the overall content width will be reduced to the same as that of the browser window, which is usually seen when a PC web page is opened on a phone, like this

So the question is, how can you display 980px in 375px width? Here’s a reminder of the equivalence between device-independent pixels and CSS pixels.

By default, device-independent pixels are equivalent to CSS pixels when the browser is scaled at 100%, which means that one unit of device-independent pixels completely covers one unit of CSS pixels.

For example, when a web page is scaled down, multiple CSS pixels will be superimposed on top of each device-independent pixel, and device-independent pixels will not change, so the image above shows 980 device-wide CSS pixels on 375 device-independent pixels.

We don’t have to worry about that, though, because the browser calculates the percentage of coverage to make sure our page is laid out consistently before and after zooming.

2. Visual ViewPort

This is the area that we can actually see on the screen, which by default is the size of the current browser.

Can through the wndow. InnerWidth/innerHeight to obtain, the unit of measure is the CSS pixels

When we zoom in and out on the mobile terminal, the layout viewport will not change. It is fixed, but the visual viewport will change, which is reflected in the overlapping relationship between CSS pixels and independent pixels of the device mentioned in the layout viewport. When the browser window is enlarged, the CSS pixels of a unit will also become larger.

3. Ideal Viewport

An ideal viewport is an ideal size for the layout viewport that perfectly fits the viewport of a mobile device. Perfect fit means that, first of all, the user does not need to zoom and horizontal scrollbars to see all the content of the site; Second, the size of the elements displayed is appropriate. For example, if we set an element 100px wide, it will not be too small to be seen in a high-density screen. Ideally, the element will be displayed in the same size regardless of the screen density and resolution.

The ideal viewport can be obtained by screen.width/height, which, as you can see, is measured in individual device pixels.

So the ideal viewport is that we set up CSS pixels that are exactly equivalent to device independent pixels so that our pages can be rendered perfectly on different devices.

4. Mobile adaptation

When we develop mobile web pages, we put a line of code in the HTML, and the meta tag is used to control the viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Copy the code

It is used for layout viewports, as shown in the following figure

When we set width to device-width, it equals the width of the ideal viewport. In this case, 1 CSS pixel equals 1 device-independent pixel, so setting width=device-width equals the layout viewport of the ideal viewport.

If you set width to a value smaller than the actual device-width, it will default to the size of the device-width.

5. Other

  • As tested, VW, VH units are calculated based on layout viewports
  • Fixed positioning is based on the initial inclusion block, which is the HTML element, the layout viewport

conclusion

1. Layout ViewPort: On PC, the layout viewport is equal to the width of the browser window. On the mobile end, scroll bars appear when the layout of the site is much larger than the screen of the mobile device because the site designed for the PC browser can be fully displayed on the small screen of the mobile end.

Js for layout viewport: document. DocumentElement. ClientWidth/ClientHeight

Unit of measurement: CSS pixels

2. Visual ViewPort: The area of the web page that the user is viewing. Users can zoom to view the content of the site. If the user zooms in on the site, the area we see becomes larger, and so does the visual port. Similarly, if the user zooms in on the site, the area we see becomes smaller, and so does the visual port. No matter how the user scales, it does not affect the width of the layout viewport.

Js for visual viewport: window. InnerWidth/innerHeight

Unit of measurement: CSS pixels

An ideal viewport size, which is ideal only if the size of the layout viewport equals the size of the device screen.

Js to obtain ideal viewport: window. The screen. The width/height

Unit of measurement: device-independent pixels