Posts in current category

Responsive Web Design - Viewport


May 03, 2021 23:00 CSS


Table of contents


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

Responsive Web Design - Viewport

Example 2, add viewport: Click View

Responsive Web Design - Viewport

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