On the PC side, the viewport refers to the viewport area of the browser that is the same width as the browser window. In the CSS standard documentation, viewports are also referred to as initial inclusion blocks, which are the root of all CSS percentage width calculations, limiting a maximum width for CSS layouts.

The mobile terminal is more complex, which involves three viewports: Layout Viewport, Visual Viewport and Ideal Viewport.

This article focuses on viewports on mobile.

1. Basic concepts

1.1 Two types of pixels

A pixel is the smallest area on a computer screen to display a particular color. The more pixels on the screen, the more content you can see in the same range. Or, when the device is the same size, the denser the pixels, the finer the picture.

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

In fact, there are already two different types of pixels involved: physical pixels and CSS pixels.

Physical pixels (Device Pixels, Device Pixels)

The number of physical pixels on a device’s screen is fixed for any device.

CSS Pixels

Is an abstract concept used in CSS and JS. The ratio between it and the physical pixels depends on the nature of the screen (whether it is high-density or not) and how the user zooms in and out, which is up to the browser to convert.

In Apple’s Retina display, groups of four pixels render an image within a single pixel area of a normal screen, allowing for a more detailed display. At this point, the 250px element spans the width of 500 physical pixels.

If the user zooms in, a CSS pixel will span many more physical pixels.

1.2 Three viewports

Mobile browsers are usually 240px to 640px wide, while most websites designed for PC are at least 800px wide, making web content look very narrow on mobile if the browser window is still used as the viewport.

Therefore, the concept of layout viewport, visual viewport and ideal viewport was introduced to make viewport on mobile no longer related to browser width.

Layout ViewPort

By default, browsers on mobile devices have a viewPort meta tag, which defines a virtual layout viewport to solve the problem of early page display on mobile phones. Both iOS and Android have this viewport set to 980px, so web pages on a PC can be rendered on a phone, but the elements look small, and you can manually zoom the page by default.

Layout viewport width/Height can be through the document. The 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">
Copy the code

The layout viewport is completely independent of the width of the mobile browser screen. CSS layouts will be evaluated against and constrained by it.

Visual ViewPort

The visual viewport is the area that the user currently sees. The user can zoom in and out of the visual viewport without affecting the layout of the viewport.

The relationship between the visual viewport and the zoom ratio is:

Current zoom value = Ideal viewport width/visual viewport widthCopy the code

So, when the user zooms in, the visual viewport becomes smaller and CSS pixels 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 the ideal viewport, which is the ideal layout viewport size for a device. The web site that appears in the ideal viewport has the optimal width without the user having to zoom.

The value of the ideal viewport is actually the value of the screen resolution, which corresponds to a pixel called device Independent Pixel (DIP). The DIP is independent of the physical pixels of the device, and a DIP occupies the same space on the device screen at any pixel density. If the user does not scale, then one CSS pixel equals one DIP.

The layout viewport can be made to match the desired viewport width by using the following methods:

<meta name="viewport" content="width=device-width">
Copy the code

In fact, this is the foundation 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, the maximum - scale = 1">
Copy the code

Here is a detailed description of each attribute:

The property name The values describe
width Positive integer or device-width Defines the width of the viewport, in pixels
height Positive integer or device-height Defines the height of the viewport in pixels
initial-scale [0.0-10.0] Define the initial scaling value
minimum-scale [0.0-10.0] Defines the maximum scaling, which must be less than or equal to the maximum-scale setting
maximum-scale [0.0-10.0] Defines a minimum-scale scale that must be greater than or equal to the minimum-scale setting
user-scalable yes / no Defines whether to allow the user to manually scale the page. The default value is yes

A few things to note:

  • The ViewPort tag is only valid for mobile browsers, not PC browsers
  • When scaling at 100%, dip width = CSS pixel width = ideal viewport width = layout viewport width
  • Setting initial-scale or Width alone is incompatible, so the best way to set the layout viewport as the ideal viewport is to set both properties together
  • Manual scaling can be forcibly enabled in Android Chrome even with User-Scalable = no

3. 1x, 2x, 3x

The hardware on the MacBook Pro’s Retina display is 2880px by 1800px. When setting the screen resolution to 1920px by 1200px, the ideal viewport width is 1920px, so the dip width is 1920px. Its ratio to the ideal viewport width is 1.5 (2880/1920), which is called the device pixel ratio:

Logical pixel width * device pixel ratio = physical pixel widthCopy the code

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

Here are common device pixel ratios:

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

For a 100px by 100px image, use CSS to set the width and height:

{
    width:100px;
    height:100px;
}
Copy the code

It’s fine to open it on a computer with a normal display, but if you open it on a phone or Retina display and render at logical resolution, their devicePixelRatio = 2, it’s like taking 4 physical pixels to depict 1 electronic pixel. This is equivalent to holding a magnifying glass at 2 times to look at an image, the image will become blurred.

In this case, you need to use @2x or even @3x diagrams to avoid image distortion.

Finally, this paper only covers the basic concepts of viewports in mobile terminal development. For details, please refer to PPK’s masterpiece mobile Web Manual.

PS: Electronic version can pay attention to the public account “code written”, send “PPK” to obtain