ChatGPT解决这个技术问题 Extra ChatGPT

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

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?


C
Community

It is Safari specific, at least at time of writing, being introduced in Safari 9.0. From the "What's new in Safari?" documentation for Safari 9.0:

Viewport Changes Viewport meta tags using "width=device-width" cause the page to scale down to fit content that overflows the viewport bounds. 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.

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

https://i.stack.imgur.com/mSP03.png

With shrink-to-fit=no

https://i.stack.imgur.com/a3PrY.png


I'm sorry, but I still don't understand what that code does. May you explain in a different way? Thanks!
@Dani By default, Safari will zoom a page out to fit any content that overflows the viewport (first example shows the blue area as visible; that's overflowing). Specifying shrink-to-fit=no prevents this behaviour, leaving the zoom level alone and leaving the overflowing content off-screen. Try the Codepen example on your iDevice (or iOS Simulator) and try changing the setting. Perhaps seeing the change interactively will help.
Ah I see. But why would someone want part of their content to be hidden on smaller screens?
@Dani Various reasons, but quick examples are sliders/carousels that place content outside of the viewport, or otherwise large non-responsive content (eg images/tables) that would otherwise overflow and cause the rest of the page to become tiny with the default shrink-to-fit behaviour. With shrink-to-fit=no, the page remains at the expected size, letting the content overflow the viewport. A user can (typically) still scroll or zoom out to see the overflow content but the initial viewport matches the device size.
@davidjb I think this is fixed with latest iOS 11. I am not able to reproduce this bug.
G
GGGin

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


P
Pierre.Vriens

This is a tag that can help your page not shrink to fit, which is done by browsers default setting if it is set to "no" just like this: <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=*no*"> then it will over ride the browsers default process to follow yours, i.e. don't shrink to fit.

I hope this clarifies, if not try copying the code in your head tag or emmet with your preferred editor and refresh and load the browser and change resolutions you'll figure out.