A viewPort is a container for the page that determines how much space to render the page.

The desktop

On the desktop, the screen is large enough, the size of the viewport is generally the area the size of the browser to display web pages, depending on the area size, can be in the document. The documentElement. ClientWidth (- clientHeight) can get to the specific size.

The mobile terminal

On mobile, for a desktop-sized web page to display properly on a small screen, the viewport should be large enough so that the page has enough room to render elements. On the iPhone, the default ViewPort width is 980px, which means that the screen can hold 980 CSS pixels horizontally, which is wide enough to display most web pages, although scrolling bars appear if the page width goes beyond 980px.

Set the viewPort size

With the default viewPort setting, a small screen can display the entire content of a web page, but every element becomes too small to see clearly, requiring zooming in and sliding around the page, which is a bad experience. Most websites today are designed to be responsive, and when rendered on a small screen, the layout of the page changes to fit the small screen, such as hidden menus, single column layouts, etc. In this case, the default viewPort size invalidates the responsive layout. For example, if a web page uses a media query (@media) to hide sidebars if the screen width is less than 480px, the default viewPort width is 980px, so the entire page appears on the screen and can never be smaller than 480px, the media query will not work.

So, is there a way to manually specify the viewPort size? Yes, use the meta tag:

<meta name="viewport" content="width=320">

Placing this code in the HTML head gives the browser a viewport width of 320px, which means the screen can hold 320 CSS pixels horizontally. In this viewport, one width: The actual width of the 50% sidebar is 160px (320 * 50%).

To summarize, the viewPort size determines:

  1. How many CSS pixels can a screen hold
  2. Percentage size (e.gwidth: 100%)

device-width

The larger the viewport size, the smaller the page elements will be in order to display more CSS pixels for the same screen size. In the trade-off, there is an optimal viewport size for each device, below which the display is optimal. Device-width is the magic.

The Meta tag with can be set to a numeric value or a string device-width:

< meta name = "viewport" content = "width = device - width" >

As the name suggests, device-width refers to the width of the device’s screen, or resolution, or physical pixels. The physical pixels of the iPhone 3 screen are 320 × 480, and there are 320 pixels across the screen, so device-width equals 320px. In practice, device-width is not always equal to the physical pixels of the device:

The iPhone 4 has a Retina display with 640 × 960 resolution, which is exactly double the resolution of the iPhone 3, but the device-width of the iPhone 4 is still 320px, not 640px. That’s because 320×480 looks pretty good on the iPhone. So the iPhone 4 “fills” a CSS pixel with two physical pixels, which is why the Retina display is so much more nuanced.

Similarly, on Google’s Nexus One, the physical pixel width was 480px, but engineers thought 480px was too large, so they set device-width to 320px.

In summary, device-width is a choice of the phone manufacturer, and the engineer chose the best size for the display of the device. Web developers can get the best viewport by just using device-width (or device-height).

viewport meta

Viewport, the meta tag, and some other attributes:

  • width: Sets the viewport width. It can be a positive integer or a stringwidth-device
  • height: Sets the viewport height. It can be a positive integer or a stringwidth-deviceRarely use this property
  • user-scalable: Indicates whether to allow users to zoom in and out of the page. Yes Indicates yes. No indicates no
  • initial-scale: The initial zoom value of the page
  • minimum-scale: Indicates the minimum zoom allowed by the user
  • maximum-scale: Maximum magnification allowed by the user

Write it like this:

<meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

other

Peter-paul Koch published a series of papers detailing viewports. He divided viewports on mobile devices into layout ViewPort, Visual ViewPort and Ideal ViewPort. While I don’t think there are so many classes to understand viewport, I initially understood viewport along these lines. This kind of detailed research report is rare and enjoyable to read. Recommended reading:

A tale of Two Viewports — Part One

A tale of two Viewports — Part Two

Meta viewport

Viewport (MDN) : viewport (MDN) : viewport (MDN)

Used in the Mobile browser viewport meta tags control layout – Mobile | MDN