Content width device width: meta viewport. Как он работает?

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 коэффициент
меньше 200ppi1
200 — 300 ppi1.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
  • Давайте решим увеличить-увеличить . Шаги:
    1. расширение-увеличение = МИН(увеличение, максимальное увеличение) . Операция MIN преобразуется в значение, отличное от auto . Здесь zoom — это 1.0 , а max-zoom — это auto . Это означает, что extend-zoom равно 1.0
    2. расширение-ширина = начальная ширина / расширение-увеличение . Это просто; разделите 640 на 1. Вы получите расширение-ширина равно 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 . мы получаем мин-ширина = 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-тег окна просмотра с контентом , содержащим либо ширину , начальный масштаб , либо оба.

This entry was posted in Популярное