Побочные эффекты от удаления "width = device-width" из метатега области просмотра, когда также установлено "initial-scale = 1.0" - PullRequest
Новая
       110

Побочные эффекты от удаления "width = device-width" из метатега области просмотра, когда также установлено "initial-scale = 1.0"

9 голосов
/ 16 апреля 2020

Несмотря на то, что тег <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 at-rules: 

/* 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?

Документация и процедура разрешения трудны для gr asp. Если кто-нибудь может подсказать мне еще несколько примеров по этому поводу, которые были бы очень благодарны.

В дополнение ко всему вышесказанному я собрал небольшой сайт - https://romellem.github.io/temp-site/viewport/ - для проверки некоторых конфигураций области просмотра.

А именно:

Это может помочь при тестировании.

1 Ответ

5 голосов
/ 24 апреля 2020

Прежде чем мы углубимся в то, что вы спрашиваете, давайте немного рассмотрим, почему в первую очередь существует метатег 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.

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

...