Responsive Web Design - The Viewport

What is The Viewport?

viewport is the visible area of the user's web page.

viewport translated into Chinese can be called "view zone".

Mobile browsers place pages in a virtual "viewport". Usually this virtual "viewport" is wider than the screen, so there is no need to squeeze each web page into a small window. (This will break the layout of the web page that is not optimized for mobile browsers.) Users can see different parts of the webpage by panning and zooming.

Set Viewport

A commonly used viewport meta tag for a mobile optimized page is roughly as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width: Controls the size of the viewport. You can specify a value, such as 600, or a special value, such as device-width is the width of the device (the unit is CSS pixels when the zoom is 100%).
  • height: Corresponds to width and specifies the height.
  • initial-scale: The initial scale, that is, the scale when the page is first loaded.
  • maximum-scale: The maximum scale to which the user is allowed to scale.
  • minimum-scale: The minimum scale to which the user is allowed to scale.
  • user-scalable: Whether the user can manually scale.