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.
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.