Что делает метаатрибут видового экрана сужения по размеру?

148

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

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

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

html safari webkit ios9 viewport 755
источник

Ответы:

200

Он специфичен для Safari, по крайней мере, на момент написания, и представлен в 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">

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

пример

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

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

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

Без указанной усадки

Без усадки = нет

С усадкой = нет

С усадкой = нет

Давиджб
источник
2
Извините, но я до сих пор не понимаю, что делает этот код. Вы можете объяснить по-другому? Благодарность!
Дэниел Спрингер
3
@Dani По умолчанию Safari будет уменьшать масштаб страницы, чтобы соответствовать любому содержимому, которое выходит за пределы области просмотра (в первом примере синяя область показана как видимая; она переполняется). Указание shrink-to-fit=noпредотвращает такое поведение, оставляя уровень масштабирования в покое и оставляя за пределами экрана переполненное содержимое. Попробуйте пример Codepen на своем iDevice (или симуляторе iOS) и попробуйте изменить настройку. Возможно, интерактивное наблюдение за изменением поможет.
davidjb
2
Ах я вижу. Но зачем кому-то скрывать часть своего контента на экранах меньшего размера?
Дэниел Спрингер,
7
@Dani Различные причины, но быстрые примеры - это ползунки / карусели, которые размещают контент за пределами области просмотра, или другой большой неотзывчивый контент (например, изображения / таблицы), который в противном случае переполнился бы и заставил остальную часть страницы стать крошечной при использовании по умолчанию shrink-to-fitповедение. С shrink-to-fit=no, страница остается в ожидаемом размере, позволяя содержимому выходить за пределы области просмотра. Пользователь может (как правило) по-прежнему прокручивать или уменьшать масштаб, чтобы увидеть переполненное содержимое, но исходное окно просмотра соответствует размеру устройства.
davidjb
2
@davidjb Я думаю, что это исправлено в последней версии iOS 11. Я не могу воспроизвести эту ошибку.
Zeel Shah
13

Статистика использования iOS показывает, что использование iOS 9.0-9.2.x в настоящее время составляет 0,17%. Если эти числа действительно указывают на глобальное использование этих версий, то даже более безопасно удалить усадку до соответствия из метатега области просмотра.

После 9.2.x. IOS удаляет эту проверку тега в своем браузере.

Вы можете проверить эту страницу https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

GGGin
источник