Responsive Web Design - Viewport
What is the Viewport?
viewport user pages viewable area.
viewport can be translated into Chinese called "viewport."
Mobile browser is the page in a virtual "window" (viewport) usually this virtual "window" (viewport) wider than the screen, so you do not have to squeeze every page a small window (this will no damage layout optimized for the mobile browser page), the user can pan and zoom to view different parts of the page.
viewport meta tag for a common mobile optimized web page is as follows:
- width: control the size of the viewport, a value can be specified, if 600, or special value, such as device-width of the device width (in pixels CSS scaled to 100% of the time).
- height: width and corresponds to the specified height.
- initial-scale: the initial scale, that is, when the first page load time scale.
- maximum-scale: allows the user to zoom to the maximum ratio.
- minimum-scale: Allows the user to scale the minimum scale.
- user-scalable: whether the user can manually zoom.
The following example demonstrates the use of viewport using the viewport and not on the mobile side effects:
Example 1 was not added viewport: Click to view
Example 2, add the viewport: Click to view
If you visit on a tablet or phone, you can click on to see the effect.