Initially, the viewport meta tag appeared in the mobile version of Safari, then it was picked up by other developers and mobile browsers, although it is not part of the W3C standard.
The meta tag is placed in the
<head> of the page and sets the rules for how the browser fits the page to the width of the mobile phone or tablet screen.
Viewport on the mobile version of the site
For mobile and adaptive versions of the site, the following parameters are used:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width - says that the site is rubbery and stretches / shrinks to the full width of the screen.
initial-scale=1 - sets the scale of the page, value
1 = 100%,
1.5 = 150%.
Viewport for the desktop version of the site
If the site does not have a mobile version, then without a viewport on mobile devices, it will be displayed with a clipped background on the right side:
In such cases, it is recommended to specify a width value equal to the site width, plus 25-40px for side padding.
<meta name="viewport" content="width=1024>
minimal-scale=0.5 - sets the minimum scale (50%)
maximal-scale=1.5 - sets the maximum scale (150%)
user-scalable=no - turns off the ability to control the scale.
<meta name="viewport" content="width=device-width, user-scalable=no">
@Viewport CSS rule
CSS has an @viewport rule similar to a meta tag, but it doesn't make sense to use it yet. Firefox and Safari browsers do not support it.
More details at https://developer.mozilla.org.
For responsive and mobile sites:
For fixed sites:
CSS @viewport support: