Visual viewport

  1. The width of the visual port is the width of the browser on the PC and the screen width of the mobile phone.
  2. When you zoom in on a page, the visual viewport shrinks and a single CSS pixel takes up more physical pixels.

Layout viewport

  1. The width of the PC layout viewport is the width of the browser.
  2. The mobile terminal can set the layout viewport width through the content of the viewport. If the content is smaller than the screen width, it is set to the screen width without being affected by scaling.
  3. throughdocument.documentElement.clientWidthTo obtain.

Ideal viewport

  1. The web site that appears in the ideal viewport has the optimal width without the user having to zoom.
  2. Since the resolution width of mobile phones is around 375, designing pages based on 375 width can simplify calculation. Therefore, the value of the ideal viewport is actually the value of screen resolution, and its corresponding pixel is called device Logical 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.
  3. 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.

PC

When the content of the page exceeds the width of the browser, a scroll bar is displayed to scroll the page without zooming (the ViewPort TAB is only valid for mobile browsers).

The mobile terminal

When the initial-scale of the viewPort is not set, the browser automatically scales the page to make it as complete horizontally as possible.

conclusion

In general, mobile responsive layout is to set the layout viewport equal to the ideal viewport, and the ideal viewport width is equal to the screen resolution of the phone, so the layout viewport width is set to device-width. At the same time, when the content width is larger than the layout viewport width, mobile will automatically zoom, so you also need to set the zoom ratio to 1 and make it not automatically zoom.