Побічні ефекти видалення "width = пристрою-ширина" з метатега перегляду, коли також встановлено "початковий масштаб = 1,0"

Хоча <meta name="viewport">тег нестандартний, його "поважають більшість мобільних браузерів через фактичне домінування".

Недоліком того, що він не є справжнім веб-стандартом, є детальна документація, яка не доступна, як інші стандарти. Робоча група CSS має специфікацію для цього, так це те , що я в основному з використанням в якості авторитетного праці.

Моє головне питання:

Яка була б сприйнята різниця між наступними деклараціями?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="initial-scale=1.0">

Також можна запитати, які відмінності між цими двома правилами @viewport CSS:

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Як я прийшов до цих @viewportперекладів:

width=device-width до min-width: extend-to-zoom; max-width: 100vw;

У документі модуля адаптації пристрою CSS рівня 1 вказується:

Ці widthта heightвидові <META>властивості переводяться в widthі heightдескриптори, встановивши min-width/ min-heightзначення extend-to-zoomта max-width/ max-heightзначення довжину від перегляду.

Вони додатково наводять приклад :

Цей <META>елемент:

<meta name="viewport" content="width=500, height=600">

перекладається на:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

widthДескриптор скорочений описуються наступним чином:

Це скорочений дескриптор для налаштування і min-widthі max-width. Одне <viewport-length>значення встановить і те, min-widthі max-widthце значення. Два <viewport-length>значення будуть встановлені min-widthна перше і max-widthна друге.

Таким чином, це безперечно width: extend-to-zoom 500px;рівнозначне min-width: extend-to-zoom; max-width: 500px;.

Це лише залишає 100vwчастину. У розділі 10.4 вони пояснюють:

device-widthі device-heightперекладати на 100vw і 100vh відповідно

Тож ми можемо нарешті побачити, як width=device-widthце перекладається min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 до zoom: 1.0; width: extend-to-zoom;

Це є дослівний приклад :

Цей <META>елемент:

<meta name="viewport" content="initial-scale=1.0">

перекладається на:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

Інше питання , у мене тут є, то , що саме це extend-to-zoomзначення?

Документація по ньому і його процедури дозволу важко зрозуміти. Якщо хтось може вказати мені на кілька подальших прикладів з цього приводу, які були б дуже вдячні.

На додаток до всього вище, я створив швидкий сайт - https://romellem.github.io/temp-site/viewport/ - для тестування деяких конфігурацій вікна перегляду.

А саме:

• content = "ширина = ширина пристрою, початкова шкала = 1,0"
• content = "початковий масштаб = 1,0"

Це може допомогти при тестуванні.

Перш ніж ми поглибимося у те, що ви запитуєте, давайте трохи розберемося, чому viewportмета-тег існує в першу чергу. Ось що я зібрав.

Для чого нам потрібен viewportтег?

Вікно перегляду - це область, де можна побачити веб-вміст. Зазвичай відображена сторінка (веб-вміст) більша за вікно перегляду. Як результат, ми зазвичай використовуємо смуги прокрутки, щоб побачити прихований вміст (тому що вікно перегляду не може відображати все). Цитується з модуля адаптації пристрою CSS рівень 1 :

Вузький вікно перегляду є проблемою для документів, розроблених так, щоб вони добре виглядали в настільних браузерах. Результат полягає в тому, що постачальники мобільних браузерів використовують фіксований початковий розмір блоку, який відрізняється від розміру вікна перегляду та близький до типового вікна браузера настільних пристроїв. Окрім прокручування чи панорамування, масштабування часто використовується для переходу між оглядом документа та збільшенням масштабів певних ділянок документа для читання та взаємодії з ними.

У мобільних пристроях (та інших менших пристроях) початковий блок, що містить , зазвичай більший, ніж вікно перегляду. Наприклад, мобільний пристрій, який має ширину екрану, 640pxможе мати початковий блок, що містить 980px. У цьому випадку початковий блок, що містить, зменшується, щоб 640pxвін міг поміститися в екрані мобільного пристрою. Ця 640pxширина (ширина екрану) - це те, що називається initial-widthвікном перегляду, яке буде доречним для нашої дискусії.

Отже .... Навіщо нам потрібен цей viewportтег? Ну а зараз у нас є медіа-запити, які дозволяють нам розробляти мобільні пристрої. Однак цей медіа-запит залежить від фактичної ширини вікна перегляду. На мобільних пристроях агент користувача автоматично стилізує початковий розмір вікна перегляду на інший фіксований (зазвичай більший, ніж початковий розмір вікна перегляду). Отже, якщо ширина вікна перегляду мобільного пристрою встановлена, правила CSS, які ми використовуємо в медіа-запитах, не виконуватимуться просто тому, що ширина огляду ніколи не змінюється. Використання viewportтега, ми можемо контролювати в фактичної ширини вікна перегляду (після того , як стиль в UA). Цитується з MDN :

Однак цей механізм не настільки хороший для сторінок, оптимізованих для вузьких екранів за допомогою медіа-запитів - якщо, наприклад, віртуальний вікно перегляду становить 980 пікселів, медіа-запити, що починаються з 640 пікселів або 480 пікселів або менше, ніколи не будуть використовуватися, що обмежує ефективність таких чуйні методи дизайну.

Зауважте, що viewportтег також може змінювати фактичну висоту вікна перегляду, а не лише ширину

viewport тегів width

widthУ viewportтезі транслюються max-widthв @viewportправилах. Коли ви оголошуєте widthяк device-width, це переводиться 100%в @viewportправило. Значення відсотків визначається на основі initial-widthвікна перегляду. Отже, якщо ми все ще використовуємо наведений вище приклад, значення max-widthбуде вирішено до значення 640px. Як ви з'ясували, це лише визначає max-width. min-widthБуде автоматично extend-to-zoom.

extend-to-zoom

Ваше питання полягало в тому, яке саме значення має розширений масштаб ? З того, що я зібрав, це значення, яке використовується для підтримки вікна перегляду, що розширюється, щоб відповідати зоні перегляду на заданому рівні збільшення. Іншими словами, це значення розміру вікна перегляду, яке змінюється на основі вказаного значення масштабування. Приклад? Враховуючи, що max-zoomзначення таблиці стилів UA є 5.0і initial-widthє 320px, <meta name="viewport" content="width=10">буде дозволено до початкової фактичної ширини 64px. Це має сенс, тому що якщо пристрій має лише 320 пікселів і його можна 5xзбільшити лише на нормальне значення, то мінімальний розмір вікна перегляду буде таким 320px divided by 5, що означає показувати лише 64 пікселів одночасно ( а не 10pxтому що для цього знадобиться масштабування 32x!). Це значення буде використано алгоритмом для визначення способу розширення (зміни) min-widthта max-widthзначень, які відіграватимуть роль у визначенні фактичної ширини вікна перегляду.

Збираючи все це разом

Отже, по суті, в чому різниця між <meta name="viewport" content="width=device-width, initial-scale=1.0">і <meta name="viewport" content="initial-scale=1.0">? Просто повторіть кроки алгоритму ( це і це ). Давайте зробимо останнє (той, що не має widthатрибуту) першим. (Будемо вважати, що initial-widthвікно перегляду є 640px.)

• widthне встановлено, це призводить max-widthі min-widthбудучи extend-to-zoomв @viewportправилі.
• initial-scaleє 1.0. Це означає, що zoomзначення також є1.0
• Давайте вирішимоextend-to-zoom . Кроки:
  1. extend-zoom = MIN(zoom, max-zoom). MINОперація перетворюється в значення, яке не- auto. Ось, zoomє 1.0і max-zoomє auto. Це означає, що extend-zoomє1.0
  2. extend-width = initial-width / extend-zoom. Це легко; ділимо 640 на 1. Отримаємо extend-widthдорівнює640
  3. Оскільки extend-zoomце не- auto, ми перейдемо до другого умовного. max-widthце дійсно extend-to-zoom, це означає, що max-widthбуде встановлено extend-width. Таким чином,max-width = 640
  4. min-widthКрім того extend-to-zoom, це означає встановлення min-widthдля max-width. Ми отримуємоmin-width = 640
• Після розв’язання не-auto (тобто extend-to-zoom) значень для max-widthі min-width. Ми можемо перейти до наступної процедури . Так min-widthчи max-widthні auto, ми будемо використовувати перші ifв процедурі, таким чином , встановивши початковий фактичний видовий екран widthдо MAX(min-width, MIN(max-width, initial-width)), який прирівнює MAX(640, MIN(640, 640)). Це вирішено 640для вашого початкового фактичного вікна переглядуwidth
• Перехід до наступної процедури . На цьому кроці widthнемає auto. Значення не змінилося , і ми в кінцевому підсумку з реальним відовомом widthз640px

Зробимо перше.

• widthвстановлено, це призводить до max-widthбути 100%( 640pxв нашому випадку) і min-widthбути extend-to-zoomв @viewportправилі.
• initial-scaleє 1.0. Це означає, що zoomзначення також є1.0
• Давайте вирішимоextend-to-zoom . Якщо ви будете слідувати інструкціям ретельно (майже такий же , як і вище), ви будете в кінцевому підсумку з max-widthз 640pxі min-widthз 640px.
• Ви, мабуть, зараз можете побачити викрійку. Ми отримаємо фактичну ширину вікна перегляду 640px.

Так у чому полягає сприймається різниця? По суті немає . Вони обидва роблять те саме. Сподіваюся, моє пояснення допомагає ;-) Якщо все було не так, скажіть мені.