<meta name="viewport">

A <meta name="viewport"> element has the following additional attributes:

content

The content attribute must be defined, and its value sets various viewport-related behaviors. Accepts one or more of the following keywords in a comma-separated list:

width

Defines the pixel width of the viewport that you want the website to be rendered at. It can be a positive whole number or the keyword device-width.

height

Defines the height of the viewport. It can be a positive whole number or the keyword device-height. This is not used by any browser.

initial-scale

Defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size. It can be a number between 0.0 and 10.0.

maximum-scale

Defines the maximum amount to zoom in. It must be greater or equal to the minimum-scale or the behavior is undefined. Browser settings can ignore this rule, and iOS10+ ignores it by default. It can be a number between 0.0 and 10.0.

minimum-scale

Defines the minimum zoom level. It must be smaller or equal to the maximum-scale or the behavior is undefined. Browser settings can ignore this rule, and iOS10+ ignores it by default. It can be a number between 0.0 and 10.0.

user-scalable

A boolean indicating if the user can zoom the web page. Browser settings can ignore this rule, and iOS10+ ignores it by default. It can be either yes or no, defaulting to yes.

Warning: Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content.

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

viewport-fit

Defines the viewable portions of the web page. It can be one of the keywords auto, contain, or cover.

• auto: Doesn't affect the initial layout viewport, and the whole web page is viewable.
• contain: The viewport is scaled to fit the largest rectangle inscribed within the display.
• cover: The viewport is scaled to fill the device display. It's highly recommended to use the safe area inset variables to ensure that important content doesn't end up outside the display.

The following example indicates to the browser that the page should be rendered at the device width:

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

The following content value uses multiple keywords that hint to the browser to use fullscreen mode, along with viewport-fit, which helps avoid display cutouts such as mobile device notches:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

• viewport glossary term