Побочные эффекты от удаления «width = device-width» из метатега области просмотра, когда также установлено «initial-scale = 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">

В качестве альтернативы спросите , каковы различия между этими двумя @ -портовыми 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;

Документ уровня 1 модуля адаптации устройства CSS гласит:

Эти 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 = "width = device-width, initial-scale = 1.0"
• содержание = «начальная шкала = 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

Ваш вопрос заключался в том, что именно является значением extension-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.

Так в чем же разница? По сути нет . Оба они делают то же самое. Надеюсь, мое объяснение поможет ;-) Если что-то не так, скажите мне.