Что делает мета-атрибут shrink-to-fit viewport?

Я не могу найти документацию для этого. Это специфично для Safari?

в iOS 9 недавно произошла ошибка (здесь), решением которого является добавление shrink-to-fit=no для просмотра мета.

что делает этот код?

1 ответов


Это специфический Safari, по крайней мере на момент написания, вводится в Safari 9.0. Из "Что нового в Safari?"документация для Safari 9.0:

Изменения Видового Экрана

Viewport мета-теги с помощью "width=device-width" заставьте страницу масштабироваться, чтобы соответствовать содержимому, которое переполняет границы окна просмотра. Вы можете переопределить это поведение, добавив "shrink-to-fit=no" к вашему метатегу, как показано ниже. Добавленное значение предотвратит масштабирование страницы по размеру область просмотра.

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

короче говоря, добавление этого в метатег viewport восстанавливает поведение до Safari 9.0.

пример

здесь работал наглядный пример, который показывает разницу при загрузке страницы в двух конфигурациях.

Красная секция-это ширина окна просмотра, а синяя секция расположена вне начального окна просмотра (например,left: 100vw). Обратите внимание, как в первом примере страница масштабируется до подходит, когда shrink-to-fit=no опущено (таким образом, отображается содержимое вне видового экрана), а синее содержимое остается вне экрана в последнем примере.

код для этого примера можно найти вhttps://codepen.io/davidjb/pen/ENGqpv.

без shrink-to-fit указано

Without shrink-to-fit=no

С shrink-to-fit=нет

With shrink-to-fit=no