What does the shrink-to-fit viewport meta attribute do

Question

I m having trouble finding documentation for this  Is it Safari specific   There was a recent bug in iOS 9  here   the solution to which is adding shrink-to-fit no to the viewport meta    What does this code do

User · Answer

As stats on iOS usage  indicating that iOS 9 0-9 2 x usage is currently at 0 17   If these numbers are truly indicative of global use of these versions  then it   s even more likely to be safe to remove shrink-to-fit from your viewport meta tag   After 9 2 x  IOS remove this tag check on its  browser   You can check this page https   www scottohara me blog 2018 12 11 shrink-to-fit html

User · Answer

It is Safari specific  at least at time of writing  being introduced in Safari 9 0   From the  quot What s new in Safari  quot  documentation for Safari 9 0   Viewport Changes Viewport meta tags using  quot width device-width quot  cause the page to scale down to fit content that overflows the viewport bounds  You can override this behavior by adding  quot shrink-to-fit no quot  to your meta tag as shown below  The added value will prevent the page from scaling to fit the viewport   lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 0  shrink-to-fit no quot  gt   In short  adding this to the viewport meta tag restores pre-Safari 9 0 behaviour  Example Here s a worked visual example which shows the difference upon loading the page in the two configurations  The red section is the width of the viewport and the blue section is positioned outside the initial viewport  eg left  100vw    Note how in the first example the page is zoomed to fit when shrink-to-fit no is omitted  thus showing the out-of-viewport content  and the blue content remains off screen in the latter example  The code for this example can be found at https   codepen io davidjb pen ENGqpv  Without shrink-to-fit specified  With shrink-to-fit no

[html] What does the shrink-to-fit viewport meta attribute do?

The answer is

Examples related to html

Examples related to safari

Examples related to webkit

Examples related to ios9

Examples related to viewport

Tags