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


У меня возникли проблемы с поиском документации для этого. Это специфика сафари?

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

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

1 80

1 ответ:

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

Видовой Экран Меняется

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

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

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

пример

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

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

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

без сокращения-к-пригонки указан

Without shrink-to-fit=no

С shrink-to-fit=no

With shrink-to-fit=no