Прежде чем мы углубимся в то, что вы спрашиваете, давайте немного рассмотрим, почему 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
. шаги:
extend-zoom = MIN(zoom, max-zoom)
, MIN
Операция преобразуется в значение, которое не- auto
. Здесь zoom
есть 1.0
и max-zoom
есть auto
. Это означает , что extend-zoom
является1.0
extend-width = initial-width / extend-zoom
, Это легко; разделите 640 на 1. Вы получите extend-width
равно640
- Поскольку
extend-zoom
это не auto
, мы перейдем ко второму условию. max-width
действительно extend-to-zoom
, это означает, что max-width
будет установлено значение extend-width
. Таким образом,max-width = 640
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
.
Так в чем же разница? По сути нет . Оба они делают то же самое. Надеюсь, мое объяснение поможет ;-) Если что-то не так, скажите мне.
1.0
, но я не уверен в этом. В любом случае, отличный ответ, спасибо!viewport
атрибута тега - это когда вы не указалиinitial-scale
. Например, когда вы пишете<meta name="viewport" content="360px">
, вы знаете, что не контролируете начальный уровень масштабирования. Таким образом, из моего ограниченного тестирования стиль UA всегда сжимает (через некоторую процедуру, которая может быть не нормативной) область просмотра. Однако фактический видовой экран всегда будет иметь ширину360px
, независимо от начального размера видового экрана.<meta name="viewport" content="360px", initial-scale=1.0>
, вы делаетеmin-width
toextend-to-zoom
и в сочетании соzoom
значением, это всегда будет принимать самое большое значение между начальной шириной области просмотра, деленной на значение масштаба иmax-width
. В процедуре ограничения (раздел 7.2) вы увидите, чтоwidth = MAX(min-width, MIN(max-width, initial-width))
. Из моего ограниченного тестирования, мой вывод таков: когдаmax-width
указанное значение меньше, чем ...max-width
значение больше начальной ширины области просмотра, минимальное значение будет начальной шириной области просмотра, а максимальное значение будет, ну, вmax-width
общем , значением. Сextend-to-zoom
семантической точки зрения имеет смысл, потому что значениеextend-to-zoom
onmin-width
буквально расширяет значение до ширины области просмотра при увеличении1.0
. И это согласуется с ответом выше, которыйextend-to-zoom
изменяет / расширяет / расширяетwidth
значение заданного уровня масштабирования.initial-scale
атрибута, но это один из способов вызвать ощутимую разницу. Вернемся к моему первому комментарию, стиль UA также может увеличивать (не только уменьшать) область просмотра, когда ширина устройства превышает 360px.