755 755 - 6 months ago 109
HTML Question

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

I'm having trouble finding documentation for this. Is this Safari specific?

There was a recent bug in iOS 9 http://kihlstrom.com/2015/shrink-to-fit-no-fixes-zoom-problem-in-ios-9/, the solution to which is adding the

shrink-to-fit=no
attribute to the viewport meta.

I just want to know exactly what this attribute does ><

Answer

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.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

In short, adding this to the viewport meta tag restores pre-Safari 9.0 behaviour.

Comments