The question basically consists of what you see in the title, and I have seen this attribute in many templates and works lately ...
Can someone tell me what it works for? Apart from that, what is the best way to write this meta tag with its attributes? Thanks!
This is a (adapted) translation of the accepted answer for a similar question on the site in English. If this answer is useful, accept it and visit the original answer to give it a positive vote.
"shrink-to-fit=no" is something specific to Safari, at least at the time of writing this response, and was introduced as part of Safari 9.0. Quoting the section "What's new in Safari?" of the documentation for Safari 9.0 :
Changes in the Viewport
Viewport meta tags that use
"width=device-width"will cause the page to scale (down) to fit content that sticks out of the viewport boundaries. You can override this behavior by adding"shrink-to-fit=no"to your meta tag as shown below. The added value will prevent the page from scaling to fit the viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
In short, adding that to the meta tag (or meta-tag) of the viewport will restore the behavior of versions prior to Safari 9.0.
Here is a visual example that shows the difference after loading the page with both configurations.
The section in red is the width of the viewport and the blue section is positioned outside the initial viewport (e.g. left: 100vw ). You can see how in the first example the page has zoom to adjust when shrink-to-fit=no is omitted (therefore showing the content that is outside the viewport), and the blue area is kept off the screen in the second example.
The code in this example can be found in this Codepen .
shrink-to-fit
shrink-to-fit=no
