Viewport


Responsive Web Design - Viewport

What is Viewport?

Viewport is the visible area of ​​the user's web page.

viewport translated into Chinese can be called "viewport".

Mobile browsers place the page in a virtual "window" (viewport). Usually this virtual "window" (viewport) is wider than the screen, so that each web page does not need to be squeezed into a small size. In a window (which would break the layout of webpages that are not optimized for mobile browsers), users can pan and zoom to see different parts of the webpage.

Set Viewport

The viewport meta tag of a commonly used page optimized for mobile web pages is roughly as follows: 

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

  • width: control The size of the viewport can be specified as a value, such as 600, or a special value, such as device-width, which is the width of the device (units are CSS pixels when zoomed to 100%).

  • Height: Corresponds to width, specifying the height.

  • initial-scale: The initial scaling ratio, that is, the scaling ratio when the page is loaded for the first time.

  • maximum-scale: The maximum scale the user is allowed to zoom to.

  • minimum-scale: The minimum scale to which the user is allowed to zoom.

  • user-scalable: Whether the user can manually scale.

The following examples demonstrate the effects of using viewport and not using viewport on the mobile terminal:

Example 1, no viewport is added

1.png

Example 2, add viewport

2.png