A meta tag named ViewPort is used to control the width, zoom, and scalability of the page. Let’s analyze it today.

What is the Viewport

Let’s look at the MDN definition of Viewport:

A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed

Viewports represent polygonal (usually rectangular) areas in the computer graphics that you are currently viewing.

So in a browser, a viewport is the area that displays the web page. Of course, the actual width of a web page may be larger than the viewable area of the browser, especially on mobile devices, where you may need to swipe to navigate to other parts of the page.

As above, shows the page respectively show the different status on different equipment, on a desktop browser, viewport width is equal to the width of the browser, it seems there is no problem, but on the mobile terminal, because the device screen is too small, if the viewport width is equal to the width of the browser, the page display is particularly crowded, based on this, The viewport is divided into visual viewport (Visual ViewPort) and visual viewport (layout viewPort).

What the Virtual Viewport? | Web | Google Developers

Layout Viewport

For layout viewports, in the words of George Cummins, think of layout viewports as large images that do not change size or shape. You now have a smaller frame through which you can view the larger image. The small frame is surrounded by opaque material that blocks part of the larger image. The part of the large image you can see through the box is the viewport. You can step back from the large image to see the whole image at once while holding down the frame (zoom out), or move in (zoom in) to see only part of it. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) will not change.

In order to accommodate sites designed for desktop browsers, the default layout viewport width for mobile devices is much wider than the screen width. Set the viewport width to 980px or 1024px, depending on the device. Here are the default viewport widths for some devices:

These default viewport widths are set without setting
case processing, can through the document. The documentElement. ClientWidth acquisition.

Visual Viewport

The viewport is the part of the viewport that we can see, and we can zoom to change the size of the viewport.

PPK mentions that the viewport width can be obtained using window.innerWidth, but this is not supported. Chrome after 61 can use Visual Viewport API to obtain Visual Viewport width, including scaling, the deviation of the page, for example: Windows. VisualViewport. Width, but its still exist certain compatibility issues:

Also, when we zoom, only the size of the viewport actually changes, not the layout viewport. For example, when zooming in, the layout viewport width remains the same, only the viewport width decreases:

Note: Page scaling does not cause the CSS layout to be recalculated (reflux)

Meta Viewport

Add a meta tag to the HTML header, for example:

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

This setup was originally introduced by Apple and has since been adopted by more browsers.

Width =device-width means to set the layout viewport width as the ideal viewport width. This ideal viewport width depends on the device. For example, when we do mobile page development, we usually use iphone6/7/8 as the base, while iPhone6’s ideal viewport width is 375.

The ideal viewport width can be obtained from window.screen.width

Similarly, initial-scale=1.0 allows the page to have an initial scale of 1 to ensure that the layout viewport width is equal to the desired viewport width, since using width=device-width alone can cause compatibility problems:

In addition, meta ViewPort has more attributes, all of which are shown in the following table:

attribute describe
width Used to set the width of the layout viewport
initial-scale Sets the initial zoom of the page
minimum-scale Sets the minimum zoom for the page
maximum-scale Sets the maximum zoom for the page
userscale-able Whether scaling is supported

Of course, meta ViewPort is set for a responsive layout to make the page experience better, but if the page is not responsive, setting a ViewPort may not make sense.

conclusion

  • Viewport represents the area used to display the web page
  • Viewport is subdivided into layout viewports (Layout Viewport) and viewports (Visual Viewport)
  • Can be achieved byMeta ViewportSet the width of the layout viewport to achieve an ideal state
  • After Chrome 61, you can use the Visual Viewport API to get the properties of the Visual Viewport

Relevant reference

  • Viewport – MDN Web Docs Glossary: Definitions of Web-related terms | MDN
  • A tale of Two Viewports — Part One
  • A tale of two Viewports — Part Two
  • Meta viewport
  • Browser compatibility — viewports
  • Viewport visualisation app ALPHA
  • What the Virtual Viewport?  |  Web  |  Google Developers
  • Introducing visualViewport  |  Web  |  Google Developers
  • Visual Viewport API