YouTip

# Responsive Web Design - Viewport\n\n* * *\n\n## What is a Viewport?\n\nThe viewport is the visible area of a web page.\n\nThe term "viewport" can be translated into Chinese as "Viewport" (shì qū).\n\nMobile browsers display web pages in a virtual "window" (the viewport), which is usually wider than the screen. This avoids squeezing every page into a small window (which would break the layout of pages not optimized for mobile browsers). Users can pan and zoom to view different parts of the page.\n\n* * *\n\n## Setting the Viewport\n\nA commonly used viewport meta tag for mobile-optimized pages looks roughly like this:\n\n* **width**: Controls the width of the viewport. It can be set to a specific value like 600, or to a special value like `device-width`, which is the width of the device (in CSS pixels at 100% zoom).\n* **height**: Corresponds to `width`, specifying the height.\n* **initial-scale**: The initial zoom level when the page is first loaded.\n* **maximum-scale**: The maximum zoom level the user is allowed.\n* **minimum-scale**: The minimum zoom level the user is allowed.\n* **user-scalable**: Whether the user can manually zoom in or out.\n\nThe following examples demonstrate the effect of using a viewport meta tag versus not using one on a mobile device:\n\n### Example 1: Without viewport: (#)\n\n!(#)\n### Example 2: With viewport: (#)\n\n!(#)\nIf you are accessing this on a tablet or phone, you can click the links above to see the effect directly.