Responsive Web Design - Viewport

Responsive Web Design - Viewport

What is Viewport?

viewport a visual area of a user's Web page.

viewport as Chinese can be called a "viewport."

A mobile browser places a page （viewport） is usually wider than the screen, so that you don't have to squeeze each page into a very small window （viewport） can break the layout of a page that is not optimized for the phone browser), allowing users to pan and zoom to see different parts of the page.

Set up Viewport

A common viewport meta tag for pages optimized for mobile pages is roughly as follows:

• width Controls viewport which can specify a value if 600, or a special device-width width of the device (in pixels of CSS scaled to 100 percent).
• height Corresponds width and specifies height.
• initial-scale The initial scale, that is, the scale when the page load for the first time.
• maximum-scale maximum scale to which the user is allowed to scale.
• minimum-scale Allows the user to zoom to the minimum scale.
• user-scalable Whether the user can scale manually.

The following examples demonstrate the viewport viewport and not using viewport on the mobile side:

Instance 1, no viewport Click View

Example 2, add viewport: Click View

If you're accessing it on your tablet or phone, you can click directly to see the effect.

Related articles

CSS tutorial: Responsive web design