Responsive Web Design - Viewport
What is the Viewport?
The viewport is the visible area of the user's web page.
The viewport can be translated into Chinese as "视区".
Mobile browsers place the page in a virtual "window" (viewport), which is usually wider than the screen. This prevents the need to squeeze every web page into a small window (which would disrupt the layout of pages not optimized for mobile browsers). Users can pan and zoom to view different parts of the web page.
Setting the Viewport
A commonly used viewport meta tag for mobile-optimized web pages is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width: Controls the size of the viewport. It can be a specific value, such as 600, or a special value like device-width, which is the width of the device (in CSS pixels when scaled to 100%).
height: Corresponds to the width, specifying the height.
initial-scale: The initial zoom ratio, which is the scale when the page is first loaded.
maximum-scale: The maximum scale at which the user is allowed to zoom.
minimum-scale: The minimum scale at which the user is allowed to zoom.
user-scalable: Whether the user can manually zoom.
The following examples demonstrate the effect of using and not using the viewport on mobile devices:
Example 1, Without Viewport: Click to View
Example 2, With Viewport: Click to View
If you are accessing on a tablet or phone, you can click to view the effect directly.