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

content

Thecontent 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 keyworddevice-width.

height

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

initial-scale

Defines the ratio between the device width (device-width in portrait mode ordevice-height in landscape mode) and the viewport size.It can be a number between0.0 and10.0.

maximum-scale

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

minimum-scale

Defines the minimum zoom level.It must be smaller or equal to themaximum-scale or the behavior is undefined.Browser settings can ignore this rule, and iOS10+ ignores it by default.It can be a number between0.0 and10.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 eitheryes orno, defaulting toyes.

Warning:Disabling zooming capabilities by settinguser-scalable to a value ofno 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 keywordsauto,contain, orcover.

• 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 thesafe 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 followingcontent value uses multiple keywords that hint to the browser to use fullscreen mode, along withviewport-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