Що робить мета-атрибут зменшеного розміру для перегляду?

143

У мене виникають проблеми з пошуком документації для цього. Це Safari специфічно?

Нещодавно з’явилася помилка в iOS 9 ( тут ), вирішення якої - додавання shrink-to-fit=noдо метавиду перегляду.

Що робить цей код?

html  safari  webkit  ios9  viewport 
— 755
джерело

Відповіді:

193

Саме 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 .

Без уточнення відповідно до вказаного

Без зменшення до придатності = ні

З зменшенням до придатності = ні

З зменшенням до придатності = ні

— davidjb
джерело
2
Вибачте, але я все ще не розумію, що робить цей код. Чи можете ви пояснити по-іншому? Дякую!
— Даніель Спрінгер
3
@Dani За замовчуванням Safari зменшить розмір сторінки, щоб вмістити будь-який вміст, що переповнює область перегляду (перший приклад показує синю область як видиму; це переповнюється). Визначення shrink-to-fit=noзапобігає такій поведінці, залишаючи рівень масштабу в спокої і залишаючи переповнений вміст поза екраном. Спробуйте приклад Codepen на iDevice (або iOS Simulator) і спробуйте змінити налаштування. Можливо, побачити зміни інтерактивно допоможе.
— davidjb
2
А, бачу. Але чому хтось хоче, щоб частина їх вмісту була прихована на менших екранах?
— Даніель Спрінгер
7
@Dani Різні причини, але швидкими прикладами є слайдери / каруселі, які розміщують вміст поза вікном перегляду, або інший великий вміст, що не реагує на реалізацію (наприклад, зображення / таблиці), який інакше переповнюється, а решта сторінки стає крихітною за замовчуванням shrink-to-fitповедінка. З shrink-to-fit=no, сторінка залишається на очікуваному розмірі, дозволяючи вмісту переповнювати область перегляду. Користувач може (як правило) все ще прокручувати або зменшувати масштаб, щоб побачити вміст, що переповнюється, але початковий вікно перегляду відповідає розміру пристрою.
— davidjb
2
@davidjb Я думаю, що це виправлено в останній версії iOS 11. Я не в змозі відтворити цю помилку.
— Зеель Шах
12

Як статистика використання iOS, що вказує на те, що використання iOS 9.0-9.2.x зараз становить 0,17%. Якщо ці цифри справді вказують на глобальне використання цих версій, то навіть більше шансів на безпеку видалити зменшений розмір з метатега перегляду.

Після 9.2.х. IOS видалити цей тег, перевірте його в браузері.

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

— GGGin
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.