The viewport value for the name attribute of a <meta> element gives hints about the initial size of the viewport. If specified, you define viewport-related behaviors using a content attribute in the <meta> element as a comma-separated list of one or more values.
For example, to set the viewport to match the device's width and display content at 100% zoom:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
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.
interactive-widget
Specifies the effect that interactive UI widgets, such as virtual keyboards, have on a page's viewport. It can be the keyword resizes-visual, resizes-content, or overlays-content.
resizes-visual: The visual viewport gets resized by the interactive widget. This is the default.resizes-content: The viewport gets resized by the interactive widget.overlays-content: Neither the viewport nor the visual viewport gets resized by the interactive widget.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" />
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4