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