Содержание
meta viewport. Как он работает?
Статья, в которой познакомимся с метатегом viewport. Рассмотрим, какие значения может принимать атрибут content данного метатега, а также как его настроить для адаптивного и фиксированного сайта.
Что такое viewport
Viewport — это видимая пользователю область веб-страницы. Т.е. это то, что может увидеть пользователь, не прибегая к прокрутке.
Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4″ до 6″. А самую большую — мониторы компьютеров, размеры диагоналей которых могут превышать 24″.
До появления смартфонов и планшетов, веб-страницы в основном просматривались на экранах компьютерах. Viewport этих экранов хоть и отличался, но не настолько сильно. Для создания сайтов до появления мобильных устройств в основном использовалась фиксированная или резиновая (гибкая) разметка.
После того, как появились смартфоны и планшеты, viewport одних устройств стал сильно отличаться от viewport других устройств. Это привило к тому, что сайты, созданные для компьютеров, стало невозможно или затруднительно просматривать на смартфонах. Выходом из этой ситуации послужило появление адаптивной разметки. Адаптивная — это такая разметка, которую можно настроить под различные размеры экранов. Осуществляется создание адаптивной разметки с помощью медиа запросов, которые появились в спецификации CSS3 и в настоящий момент поддерживаются всеми основными браузерами.
Но и у адаптивной разметки появились проблемы после того как появились смартфоны с высокой плотностью пикселей и, следовательно с высоким разрешением. Чтобы более детально разобраться в этой ситуации рассмотрим следующий пример, в котором сравним 2 устройства.
Первое устройство — это смартфон Apple iPhone 3 (диагональ 3.5″). Данный телефон не имеет высокую плотность пикселей. У данной модели она составляет 163ppi (меньше 200ppi). Физическое разрешение данного смартфона составляет 320×480. Такое разрешение соответствует диагонали, если его сопоставить с разрешением мониторов настольных устройств (компьютеров). Т.е. на веб-странице этого смартфона, текст, выполненный размером 16px, будет также хорошо читаемым как на мониторе компьютера.
Второе устройство — это смартфон Apple iPhone 4. Он имеет диагональ такую же как у смартфона Apple iPhone 3, т.е. 3.5″. Но отличается от него тем, что имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение — 640×960 при тех же размерах экрана. Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше. Таким образом, текст будет реально выглядеть на 8px. Такая страница будет уже трудночитаемой. Чтобы сделать эту страницу пригодной для чтения, её представление необходимо увеличить в горизонтальном и вертикальном направлении в 2 раза (отмасштабировать).
Назначение метатега viewport
Метатег viewport был разработан компанией Apple для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Другими словами meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi). Данный метатег предназначен в большой степени для адаптивных сайтов, но с помощью него можно улучшить представления веб-страниц, имеющих фиксированную или гибкую разметку.
Добавление meta viewport к веб-странице
Метатег viewport, как уже было отмечено выше, в большой степени предназначен для адаптивной разметки. Поэтому начнём рассмотрение именно с неё.
Настройка meta viewport для адаптивных веб-страниц
Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1">
Атрибут name
предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить. В данном случае эта информация касается viewport.
Контент (содержимое) этих сведений указывается в качестве значения атрибута content
посредством пар ключ-значение, разделённых между собой запятыми.
Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:
- width=device-width
- initial-scale=1
Рассмотрим каждый из них более подробно.
Первый параметр (width=device-width
) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству (device-width
). Данная ширина (CSS) — это не физическое разрешение экрана. Это некоторая величина независящая от разрешения экрана. Она предназначена для того, чтобы мобильный адаптивный дизайн сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана.
Например, смартфон iPhone4 с физическим разрешением 640×960 имеет CSS разрешение 320×480. Это означает то, что сайт с метатегом viewport (width=device-width
) на этом устройстве будет выглядить так как будто бы это устройство имеет разрешение 320×480 (в данном случае вместо device-width
будет подставляться значение 320px). Т.е. на один CSS пиксель будет приходиться 4 физических пикселя (2 по горизонтали и 2 по вертикали).
Как же определить какое CSS разрешение будет иметь тот или иной экран устройства?
Определяется оно в зависимости от того какую экран имеет плотность пикселей. Если экран имеет плотность меньше 200ppi, то CSS-разрешение будет равно физическому. Если экран имеет плотность пикселей от 200 до 300 (ppi), то CSS-разрешение будет в 1.5 раза меньше физического. А если экран имеет плотность более 300ppi, то CSS разрешение будет определяться делением физического разрешения на некоторый коэффициент. Данный коэффициент определяется по формуле плотность/150ppi
с округлением обычно до 2, 2.5, 3, 3.5, 4 и т.д.
Плотность пикселей экрана | CSS коэффициент |
---|---|
меньше 200ppi | 1 |
200 — 300 ppi | 1.5 |
больше 300ppi | плотность/150 (с округлением до 2, 2. 5, 3, 3.5, 4 и т.д.) |
Рассмотрим несколько примеров:
- Apple iPhone 3: физическое разрешение 320×480, плотность пикселей — 163ppi. Плотность пикселей меньше 200, следовательно, CSS коэффициент равен 1. CSS разрешение будет равно физическому, т.е. 320×480.
- Apple iPhone 6: физическое разрешение 750×1344, плотность пикселей — 326ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 326/150=2 (2.2 округляем до 2). CSS разрешение будет равно 375×667.
- LG G4: физическое разрешение 1440×2560, плотность пикселей — 538ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 538/150=4 (3.6 округляем до 4). CSS разрешение будет равно 360×640.
- Galaxy S3 mini: физическое разрешение 480×800, плотность пикселей — 233ppi. Плотность пикселей больше 200, следовательно, CSS коэффициент будет равен 1.5. CSS разрешение будет равно 320×533.
- Galaxy S5: физическое разрешение 1080×1920, плотность пикселей — 441ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 441/150=3. CSS разрешение будет равно 360×640.
Второй параметр initial-scale
— устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.
meta viewport и не адаптивные страницы
Если сайт не имеет адаптивный дизайн, то его представление на экране смартфона тоже можно улучшить.
Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.
Осуществляется это тоже с помощью установления параметру width
значения device-width
. Т.е. для не адаптивных сайтов в раздел head
необходимо добавить следующую строчку:
<meta name="viewport" content="width=device-width">
Кроме того, разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.
Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:
<meta name="viewport" content="initial-scale=1">
Дополнительные параметры meta viewport
Кроме основных параметров, тег meta viewport содержит много других.
Вот некоторые из них:
minimal-scale
— задаёт минимальный масштаб;maximal-scale
— устанавливает максимальный масштаб;user-scalable
— указывает, может ли пользователь управлять масштабом или нет.
Примеры viewport с использованием дополнительных параметров:
<!-- viewport, без возможности его увеличения пользователем --> <meta name="viewport" content="width=device-width, initial-scale=1. 0, maximum-scale=1.0, user-scalable=no"> <!-- viewport, c возможностью его увеличения пользователем --> <meta name="viewport" content="width=device-width, user-scalable=yes"> <!-- viewport, имеющий ширину 1024 пикселя --> <!-- Веб-страница, с фиксированным макетом (например, с шириной 1024px или меньше) будет изначально отображаться на экране мобильного просмотра без прокрутки --> <meta name="viewport" content="width=1024">
Viewport | CSS: Адаптивность сайта
Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером
Первое, с чем необходимо познакомиться при создании адаптивной вёрстки, — мета-тег viewport. Созданный в компании Apple, он стал стандартом при создании вёрстки.
До перехода к мета-тегу необходимо разобраться, чем является viewport в браузере. Вьюпорт (viewport) — видимая пользователю область страницы, которая доступна без прокрутки.
На картинке ниже viewport обозначен красной границей.
До появления смартфонов viewport был примерно одинаковым от монитора к монитору, поэтому создатели веб-страниц не сильно беспокоились о том, как их страница будет выглядеть на другом мониторе. С приходом мобильных устройств всё стало сложнее — появилось множество устройств с самыми разнообразными областями просмотра. Из-за этого почти все сайты, которые были созданы ранее, плохо отображались на мобильных устройствах. Зачастую появлялась горизонтальная прокрутка, которая мешала просмотру сайта. Думаю, вы тоже сталкивались с такими сайтами.
Мета-тег viewport позволяет нам указать, какая область просмотра необходима для страницы. Чаще всего его используют для указания ширины области просмотра, так как вертикальный скролл является естественным при работе с веб-страницами. Ширина устанавливается через атрибут width
:
<meta name="viewport" content="width=700">
После установки такого мета-тега, ширина области просмотра нашего сайта станет 700 пикселей.
Чтобы увидеть, как это работает, возьмём эмуляцию экрана iPhone 5. Стандартный браузер Safari по умолчанию имеет viewport равный 980 пикселей. Добавим блок шириной 700 пикселей. Обратите внимание, что сейчас в HTML не указан мета-тег viewport.
Если вся ширина нашего сайта равна 700 пикселей, то такой зазор между блоком и краем экрана нас не будет устраивать. Теперь добавим мета-тег viewport, указав ширину 700 пикселей.
После установки ширины области просмотра в 700 пикселей, наш блок полностью охватывает экран устройства.
Помимо указания ширины в пикселях, есть специальное значение device-width
, которое установит ширину области равной разрешению экрана устройства, с которого открыта страница.
Другим примером может служить текст. Возьмём эмуляцию iPhone5, который имеет разрешение 320 пикселей в ширину при стандартном viewport в браузере равным 980 пикселей. Напишем любой текст с размером шрифта 20 пикселей. Это достаточно большое значение, чтобы такой текст было комфортно прочитать с экрана мобильного устройства. Но что же мы получим?
Если вы смогли разобрать текст, то у вас очень хорошее зрение 🙂 Но на самом деле это не тот результат, который мы ожидали. Связано это с тем, что наш viewport сильно больше, чем реальное разрешение.
Скорректируем viewport, использовав значение device-width
:
Таким образом мы можем сами управлять шириной области просмотра, не отталкиваясь от стандартных значений мобильных браузеров. Помимо свойства width
, у мета-тега viewport существует ещё несколько атрибутов.
Масштабирование
initial-scale
— указывает коэффициент масштабирования страницы. В качестве значения используется число от 0.1 до 10
initial-scale=1.0
initial-scale=2.0
Зачастую используется значение 1.0, чтобы браузер по умолчанию выводил наш макет в оригинальном масштабе, а не пытался его подстроить под область просмотра. Хоть это и кажется хорошей идеей, но любые изменения макета должны контролироваться разработчиком.
minimum-scale
и maximum-scale
устанавливают минимальный и максимальный коэффициент масштабирования страницы.
user-scalable
даёт возможность пользователю масштабировать страницу. В смартфонах чаще всего это делается жестом двумя пальцами. Атрибут имеет всего два возможных значения: yes
и no
.
Распространённое значение мета-тега viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Дополнительные материалы
- Список распространённых устройств и их значения viewport
css — Побочные эффекты удаления «width=device-width» из метатега окна просмотра, когда также установлено «initial-scale=1.0» Метатег
существует в первую очередь. Вот что я собрал.
Зачем нужен тег
viewport
?
Окно просмотра — это область, в которой можно просматривать веб-контент. Обычно отображаемая страница (веб-контент) больше, чем область просмотра. В результате мы обычно используем полосы прокрутки, чтобы увидеть скрытый контент (поскольку область просмотра не может отображать все). Цитата из модуля адаптации устройства CSS Уровень 1:
Узкое окно просмотра является проблемой для документов, которые должны хорошо выглядеть
в настольных браузерах. В результате производители мобильных браузеров используют
фиксированный начальный размер блока, отличный от
размер области просмотра и близок к размеру типичного окна настольного браузера.
Помимо прокрутки или панорамирования, масштабирование часто используется для изменения
между обзором документа и увеличением отдельных областей
документ для чтения и взаимодействия.
В мобильных устройствах (и других устройствах меньшего размера) начальный содержащий блок обычно больше, чем область просмотра. Например, мобильное устройство с шириной экрана 640 пикселей
может иметь начальный блок, содержащий 980 пикселей
. В этом случае исходный содержащий блок уменьшается до 640 пикселей
, чтобы его можно было разместить на экране мобильного устройства. Эта ширина 640px
(ширина экрана) называется начальной шириной
области просмотра, которая будет иметь отношение к нашему обсуждению.
Итак… Зачем нам нужен этот тег viewport
? Что ж, в настоящее время у нас есть медиа-запросы, которые позволяют нам разрабатывать дизайн для мобильных устройств. Однако этот медиа-запрос зависит от фактической ширины области просмотра . На мобильных устройствах пользовательский агент автоматически изменяет начальный размер области просмотра на другой фиксированный (обычно больший, чем первоначальный размер области просмотра). Таким образом, если ширина области просмотра мобильного устройства фиксирована, правила CSS, которые мы используем в медиа-запросах, не будут выполняться просто потому, что ширина области просмотра никогда не меняется. Использование viewport
тег, мы можем управлять фактической шириной видового экрана (после того, как UA стилизовал его). Цитата из MDN:
Однако этот механизм не так хорош для страниц, которые оптимизированы для узких экранов с помощью медиа-запросов — если виртуальная область просмотра, например, составляет 980 пикселей, медиа-запросы, которые срабатывают на 640 или 480 пикселей или меньше, никогда не будут использоваться, что ограничивает эффективность такие приемы адаптивного дизайна.
Обратите внимание, что Viewport
Tag может изменить фактическую высоту видового порта, а не только ширина
Viewport
Tag’s Ширина
Ширина
в Viewport
Tag переводится на максимум
в . Правило @viewport
. Когда вы объявляете ширину
как device-width
, она преобразуется в 100%
в правиле @viewport
. Процентное значение разрешается на основе начальная ширина
окна просмотра. Итак, если мы все еще используем приведенный выше пример, max-width
преобразуется в значение 640px
. Как вы узнали, это указывает только максимальную ширину
. min-width
автоматически станет extend-to-zoom
.
увеличить до масштаба
Ваш вопрос был что такое значение расширения до увеличения ? Из того, что я собрал, это значение, которое используется для поддержки расширения области просмотра, чтобы соответствовать области просмотра при заданном уровне масштабирования. Другими словами, это значение размера области просмотра, которое изменяется в зависимости от указанного значения масштабирования. Пример? Учитывая, что max-zoom
значение таблицы стилей UA 5.0
и initial-width
320px
,
будет преобразовано в начальную фактическую ширину 64px
. Это имеет смысл, потому что если устройство имеет только 320 пикселей и может быть увеличено только до 5x
нормального значения, то минимальный размер области просмотра будет 320 пикселей, разделенный на 5
, что означает отображение только 64 пикселей за раз ( , а не 10px
, потому что для этого потребуется 32-кратное увеличение!). Это значение будет использоваться алгоритмом для определения того, как расширить (изменить) значения min-width
и max-width
, которые будут играть роль в определении фактической ширины окна просмотра.
Собираем все вместе
Итак, в чем разница между
и
? Просто повторите шаги алгоритма (это и это). Сначала сделаем последнее (тот, у которого нет атрибута width
). (Мы предполагаем, что начальная ширина
области просмотра равна 640px
. )
-
ширина
не задана, в результатемаксимальная ширина
иминимальная ширина
равны 9000 увеличить в правиле@viewport
. -
начальная шкала
равна1.0
. Это означает, чтомасштаб
значение тоже1.0
- Давайте решим
увеличить-увеличить
. Шаги:-
расширение-увеличение = МИН(увеличение, максимальное увеличение)
. ОперацияMIN
преобразуется в значение, отличное отauto
. Здесьzoom
— это1.0
, аmax-zoom
— этоauto
. Это означает, чтоextend-zoom
равно1.0
-
расширение-ширина = начальная ширина / расширение-увеличение
. Это просто; разделите 640 на 1. Вы получитерасширение-ширина
равно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
. мы получаеммин-ширина = 640
-
- После разрешения не-
auto
(т.е.extend-to-zoom
) значений дляmax-width
иmin-width
. Можем перейти к следующей процедуре. Посколькуmin-width
илиmax-width
не являетсяauto
, мы будем использовать первыеif
в процедуре, тем самым установив начальную фактическую ширину окна просмотраMAX(min-width, MIN(max -ширина, начальная-ширина))
, что соответствуетMAX(640, MIN(640, 640))
. Это разрешается в640
для вашего исходного фактического окна просмотраширины
- Переходим к следующей процедуре. На этом шаге
ширина
неавто
. Значение не меняется, и мы получаем фактическую ширину области просмотра640 пикселей
.
Давайте сделаем первое.
-
ширина
установлена, в результатеmax-width
равно100%
(640px
в нашем случае) иmin-width
равноextend-to-zoom
в правиле@viewport
. -
начальная шкала
равна1.0
. Это означает, что значениеzoom
также равно1.0
- Давайте решим
увеличить-увеличить
. Если вы внимательно выполните шаги (почти такие же, как описано выше), вы получитеmax-width
из640px
иmin-width
из640px
. - Теперь вы, наверное, видите узор. Мы получим фактическую ширину области просмотра
640px
.
.
Так в чем разница? Практически нет . Оба они делают одно и то же. Надеюсь, мое объяснение поможет 😉 Если что-то не так, скажите мне.
html — Нужен без Bootstrap?
Если мы не используем Bootstrap, нужно ли нам
в
нашей HTML-страницы?
- html
- twitter-bootstrap-3
- метаданные
1
ДА .
совершенно не связано с фреймворком Bootstrap и должно быть на каждой веб-странице , независимо от того, какой фреймворк вы используете. .
META-тег окна просмотра
позволяет ширина устройства
сопоставляться со свойством CSS ширина
, что по существу означает, что пиксели устройства правильно сопоставляются с пикселями CSS, позволяя элементам и шрифтам правильно масштабироваться на мобильных устройствах. Без этого пиксель не является пикселем в традиционном понимании.
Без META-тега области просмотра вам будет невероятно сложно обеспечить одинаковое отображение веб-сайта на разных мобильных устройствах, поскольку большинство мобильных устройств имеют разные области просмотра. Шрифты могут казаться слишком большими на одном устройстве и слишком маленькими на другом, даже при использовании процентных единиц измерения. У Apple отличная документация демонстрирующая это в Safari.
В дополнение к этому, Google теперь проверяет веб-сайты на наличие META-тега области просмотра
через Lighthouse, и его использование улучшит вашу поисковую оптимизацию :
Чтобы ваш сайт правильно отображался на всех мобильных устройствах, сделайте убедитесь, что использовать META-тег окна просмотра
с контентом
, содержащим либо ширину
, начальный масштаб
, либо оба.