Что делает мета-атрибут 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.