A brief discussion on the specific use of viewport in mobile terminals

On the PC side, the viewport refers to the visible area of ​​the browser, and its width is consistent with the width of the browser window. In the CSS standard document, the viewport is also called the initial containing block. It is the root of all CSS percentage width calculations and limits a maximum width for CSS layout.

The mobile terminal is more complicated, involving three viewports: Layout Viewport, Visual Viewport and Ideal Viewport.

This article focuses on viewports in mobile.

1. Basic Concepts

1.1 Two kinds of pixels

A pixel is the smallest area on a computer screen that can display a specific color. The more pixels on a screen, the more content you can see in the same area. In other words, when the device size is the same, the denser the pixels, the finer the picture.

So, what happens when we set the property width: 250px; for an element in CSS? How many pixels wide is this element?

In fact, there are two different pixels involved here: physical pixels and CSS pixels.

Physical pixels (device pixels)

Refers to the physical pixels of the device screen. The number of physical pixels of any device is fixed.

CSS pixels

It is an abstract concept used in CSS and JS. The ratio between it and physical pixels depends on the characteristics of the screen (whether it is high-density) and the zoom performed by the user, and is converted by the browser itself.

In Apple's Retina screen, every 4 pixels are grouped together to render the image within a pixel display area on a normal screen, thus achieving a more sophisticated display effect. At this point, the 250px element spans a width of 500 physical pixels.

If the user zooms in, then one CSS pixel will span more physical pixels.

1.2 Three viewports

Mobile browsers are usually 240px to 640px wide, while most websites designed for PCs are at least 800px wide. If the browser window is still used as the viewport, the website content will look very narrow on the phone.

Therefore, the concepts of layout viewport, visual viewport and ideal viewport are introduced, so that the viewport in mobile terminals is no longer related to the browser width.

Layout viewport

Generally, browsers on mobile devices set a viewport meta tag by default to define a virtual layout viewport, which is used to solve the problem of early page display on mobile phones. iOS and Android basically set the viewport resolution to 980px, so the web pages on the PC can basically be displayed on the phone, but the elements will look very small. Generally, you can manually scale the web pages by default.

The width/height of the layout viewport can be obtained through document.documentElement.clientWidth / Height .

As you can see, the default layout viewport width is 980px. If you want to explicitly set the layout viewport, you can use the meta tag in HTML:

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

The layout viewport makes the viewport completely independent of the mobile browser screen width. CSS layout will be calculated based on it and constrained by it.

Visual viewport

The visual viewport is the area that the user currently sees. The user can operate the visual viewport by zooming in and out without affecting the layout viewport.

The relationship between the visual viewport and the zoom ratio is:當前縮放值= 理想視口寬度/ 視覺視口寬度

So, as the user zooms in, the visual viewport will get smaller and the CSS pixels will span more physical pixels.

ideal viewport

The default width of the layout viewport is not an ideal width, so Apple and other browser manufacturers introduced the concept of an ideal viewport, which is the most ideal layout viewport size for the device. A website displayed in an ideal viewport has an optimal width without the user having to zoom.

The value of the ideal viewport is actually the value of the screen resolution, and the corresponding pixel is called device independent pixel (dip). Dip has nothing to do with the physical pixels of the device; a dip takes up the same space on the device screen at any pixel density. If the user is not zooming, then one CSS pixel is equal to one dip.

The following method can be used to make the layout viewport consistent with the width of the ideal viewport:

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

In fact, this is the basis of responsive layout.

2. Viewport Settings

We can use the viewport meta tag to set the layout viewport.

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

Below is a detailed description of each property:

There are a few points worth noting:

• The viewport tag is only valid for mobile browsers and is invalid for PC browsers.
• When the zoom ratio is 100%, dip width = CSS pixel width = ideal viewport width = layout viewport width
• Setting initial-scale or width alone will cause compatibility issues, so the best way to set the layout viewport to the ideal viewport is to set both properties at the same time.
• It is possible to force manual scaling in Android Chrome browser even when user-scalable = no is set

3. One-time chart, two-time chart, three-time chart

The hardware pixel of the MacBook Pro Retina display is 2880px * 1800px. When the screen resolution is set to 1920px * 1200px, the ideal viewport width is 1920px, so the dip width is 1920px. The ratio of the ideal viewport width to the device pixel ratio is 1.5 (2880/1920). This ratio is called the device pixel ratio:邏輯像素寬度* 設備像素比= 物理像素寬度

The device pixel ratio can be obtained through window.devicePixelRatio , or using device-pixel-ratio in CSS.

The following are common device pixel ratios:

• Normal density desktop display: devicePixelRatio = 1
• High-density desktop displays (Mac Retina): devicePixelRatio = 2
• Mainstream mobile phone displays: devicePixelRatio = 2 or 3

For a 100px * 100px image, set its width and height via CSS:

{
    width:100px;
    height:100px;
}

It is normal to open it in a computer with a normal display, but if it is opened in a mobile phone or Retina screen and rendered according to the logical resolution, their devicePixelRatio = 2 , then it is equivalent to using 4 physical pixels to depict 1 electronic pixel. This is equivalent to using a 2x magnifying glass to look at the picture, the picture will become blurry.

At this time, you need to use @2x or even @3x images to avoid image distortion.

This concludes this article on the specific use of viewports in mobile devices. For more relevant mobile viewport content, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!