Что такое viewport. Назначение метатега viewport

Создадим простую страничку с минимальной разметкой:

Hello world!

Теперь откроем эту страничку на мобильном устройстве. Открыв, увидим, что наша страница отобразится примерно таким образом:

Как видно, текст слишком мелкий для чтения, есть куча пустого пространства, и для того, чтобы прочесть этот текст, нам нужно его увеличивать приближением.

Почему же так происходит?

Проблема мобильных браузеров

При сравнении мобильных и десктопных браузеров наиболее очевидное различие - размер экрана . Мобильные браузеры по-умолчанию отображают сайты, созданные для обычных десктопных браузеров, гораздо хуже, чем могли бы: либо путем уменьшения масштаба, делая текст и другой контент слишком мелким и нечитаемым (как в нашем варианте), либо отображая лишь небольшую часть сайта, которая умещается на экране.

Если подумать логически, то в этом есть смысл: мобильный браузер видит страницу и предполагает, что она создана для десктопной версии браузера, что верно для подавляющего числа сайтов. Исходя из этого, этот браузер задает странице ширину 980px (Safari iPhone) и пытается оптимально уместить ее на экране смартфона, отобразив в максимально уменьшенном масштабе. Обычно ширина сайтов примерно такой и является, поэтому открыв среднестатистическую веб-страницу на мобильном устройстве, она растянется на всю свою ширину, но меньше в 2-3 раза своего оригинального размера.

Поэтому, если мы хотим оптимизировать сайт для смартфонов, этот вариант не катит. Нужно каким-нибудь образом сообщить браузеру, что наша страница предназначена для отображения на мобильных устройствах и задать правила для правильного поведения области просмотра.

И вот как раз для этого мы и будем использовать мета-тег viewport , который был введен компанией Apple и как обычно скопирован остальными.

Добавим в блок следующую строку:

И вот что получится в результате:

Совсем другое дело. Задав мета-тегу viewport значение “device-width” , мы говорим браузеру, что ширина области просмотра равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по-умолчанию. На большом количестве смартфонов ширина экрана равняется 320px (в портретном режиме). Можно задать самостоятельно ширину в 320px, что даст тот же результат, но на некоторых смартфонах ширина экрана может быть другой, поэтому самый оптимальный вариант — использовать device-width.

Одним из самых распространенных вариантов определения области просмотра является следующий вариант:

который определяет ширину страницы и задает начальный масштаб.

Также, часто можно встретить такой вариант:

В таком случае странице задается ширина устройства, на котором она открыта, а также запрещается любое масштабирование — как начальное при загрузке, так и пользовательское — уже после загрузки. В таком режиме мобильная веб-страница функционирует как мобильное приложение, где пользователю доступен только вертикальный или горизонтальный скролл. Однако такую запись лучше не использовать слепо, ибо нельзя запрещать пользователю уменьшать и увеличивать масштаб по своему желанию, если того не требует дизайнерская задумка. К примеру, слишком малый шрифт ухудшает читабельность текста и в таком случае необходимо использовать приближение.

Мета-тег viewport — относительно новый, поэтому на данный момент поддерживается не всеми браузерами, особенно это касается старых моделей смартфонов. В таких случаях есть смысл использовать некоторые старые методы, которые позволяют браузеру идентифицировать страничку, как оптимизированную под мобильный веб. Это можно сделать, с помощью следующий мета-тегов:

Подробнее об этих и других специфических мобильных тегах можно почитать .

Возможные параметры для мета-тега viewport

Таблица совместимости с viewport

Два вьюпорта

Итак, допустим, что вьюпорт слишком узок для нашего CSS-шаблона. Очевидное решение - сделать вьюпорт шире. Однако, для начала разделим понятие вьюпорта на две части: визуальный вьюпорт и вьюпорт страницы.

Очень неплохо концепцию вьюпортов объясняет Джордж Камминс (George Cummins) на Stack Overflow :

Представьте вьюпорт страницы как большое изображение с неизменными размерами и формой. Теперь представьте меньшую по размеру рамку, через которую вы смотрите на это большое изображение. Эта рамка окружена непроницаемым материалом, который не дает вам увидеть большое изображение полностью, за исключением отдельных его частей. Часть большого изображения, которая видна через рамку, и будет визуальным вьюпортом. Если отойти с рамкой от большого изображения (zoom out, т.е. уменьшить масштаб), то можно увидеть сразу все изображение, или же подойти поближе (zoom in, увеличить масштаб), тогда можно будет рассмотреть только часть изображения. Также, можно поворачивая рамку менять ее ориентацию (на портретную или ландшафтную), при этом размер и форма большого изображения (вьюпорта страницы) всегда остается неизменной.

Визуальный вьюпорт - часть страницы, которая видна в данный момент на экране. Пользователь может воспользоваться прокруткой, чтобы изменить видимую часть страницы, или использовать масштабирование для изменения размеров визуального вьюпорта.

Разметка страницы, особенно если ее ширина задана в процентах, рассчитывается относительно вьюпорта страницы , который значительно шире визуального вьюпорта.

Таким образом, -элемент изначально принимает ширину вьюпорта страницы и дальше CSS ведет себя так, если бы экран был намного шире экрана телефона. Это обеспечивает сайту такое же поведение, как и в десктопном браузере.

Какой же ширины сам визуальный вьюпорт? Это зависит от браузера. Safari iPhone использует 980px, Opera - 850px, Android WebKit - 800px, а IE - 974px.

Некоторые браузеры ведут себя по-своему:

Symbian WebKit пытается приравнять вьюпорт страницы к визуальному вьюпорту, и это означает, что элементы с процентной шириной могут вести себя непредсказуемо. Однако, если страница не умещается в визуальном вьюпорте из-за абсолютных величин браузер растягивает вьюпорт страницы максимум до 850-ти пикселей.

Samsung WebKit делает вьюпорт страницы равным по ширине самого широкого элемента.

На BlackBerry при масштабе в 100% вьюпорт страницы равен будет визуальному вьюпорту при любых раскладах.

Масштабирование (Zooming)

Оба вьюпорта измеряются в CSS-пикселях. Однако, во время масштабирования размеры визуального вьюпорта меняются (при увеличении масштаба на экране умещается меньшее количество CSS-пикселей), в то время как размеры вьюпорта страницы остаются неизменными. (Если бы это было не так, браузер постоянно совершал бы reflow страницы из-за пересчета процентной ширины.)

Понимание вьюпорта страницы

Для лучшего понимания размеров вьюпорта страницы следует взглянуть на то, что происходит при наименьшем возможном масштабе страницы. Большинство мобильных браузеров по-умолчанию отображают любую страницу в наименьшем масштабе.

Дело в том, что размеры вьюпорта страницы браузеров полностью совпадают с экраном при максимально уменьшенном масштабе и поэтому равны визуальному вьюпрту.

Таким образом, ширина и высота вьюпорта страницы равна всему тому, что отображено на экране при наименьшем масштабе. При увеличении масштаба пользователем эти размеры остаются неизменными.

Ширина вьюпорта страницы всегда неизменна. Если изменить ориентацию экрана смартфона, визуальный вьюпорт изменится, но в то же время мобильный браузер приспособится к новой ориентации, немного увеличив масштаб таким образом, что вьюпорт страницы снова станет таким же по ширине, как и визуальный вьюпорт.

Это повлияло на высоту вьюпорта страницы, которая сейчас намного меньше, чем при портретной ориентации. Но для разработчиков больше важна ширина, а не высота.

Android и target-densitydpi

У устройств на платформе андроид есть свой атрибут для viewport, который выключает масштабирование для дисплеев с различным разрешением.

На устройствах с HDPI (240dpi) не будет масштабирования.

Такая запись означает, что не будет масштабирования ни на каком из устройств на Андроиде.

Материал взят с сайта:

Создадим простую страничку с минимальной разметкой:

Hello world!

Теперь откроем эту страничку на мобильном устройстве. Открыв, увидим, что наша страница отобразится примерно таким образом:

Как видно, текст слишком мелкий для чтения, есть куча пустого пространства, и для того, чтобы прочесть этот текст, нам нужно его увеличивать приближением.

Почему же так происходит?

Проблема мобильных браузеров

При сравнении мобильных и десктопных браузеров наиболее очевидное различие - размер экрана . Мобильные браузеры по-умолчанию отображают сайты, созданные для обычных десктопных браузеров, гораздо хуже, чем могли бы: либо путем уменьшения масштаба, делая текст и другой контент слишком мелким и нечитаемым (как в нашем варианте), либо отображая лишь небольшую часть сайта, которая умещается на экране.

Если подумать логически, то в этом есть смысл: мобильный браузер видит страницу и предполагает, что она создана для десктопной версии браузера, что верно для подавляющего числа сайтов. Исходя из этого, этот браузер задает странице ширину 980px (Safari iPhone) и пытается оптимально уместить ее на экране смартфона, отобразив в максимально уменьшенном масштабе. Обычно ширина сайтов примерно такой и является, поэтому открыв среднестатистическую веб-страницу на мобильном устройстве, она растянется на всю свою ширину, но меньше в 2-3 раза своего оригинального размера.

Поэтому, если мы хотим оптимизировать сайт для смартфонов, этот вариант не катит. Нужно каким-нибудь образом сообщить браузеру, что наша страница предназначена для отображения на мобильных устройствах и задать правила для правильного поведения области просмотра.

И вот как раз для этого мы и будем использовать мета-тег viewport , который был введен компанией Apple и как обычно скопирован остальными.

Добавим в блок следующую строку:

И вот что получится в результате:

Совсем другое дело. Задав мета-тегу viewport значение “device-width” , мы говорим браузеру, что ширина области просмотра равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по-умолчанию. На большом количестве смартфонов ширина экрана равняется 320px (в портретном режиме). Можно задать самостоятельно ширину в 320px, что даст тот же результат, но на некоторых смартфонах ширина экрана может быть другой, поэтому самый оптимальный вариант — использовать device-width.

Одним из самых распространенных вариантов определения области просмотра является следующий вариант:

который определяет ширину страницы и задает начальный масштаб.

Также, часто можно встретить такой вариант:

В таком случае странице задается ширина устройства, на котором она открыта, а также запрещается любое масштабирование — как начальное при загрузке, так и пользовательское — уже после загрузки. В таком режиме мобильная веб-страница функционирует как мобильное приложение, где пользователю доступен только вертикальный или горизонтальный скролл. Однако такую запись лучше не использовать слепо, ибо нельзя запрещать пользователю уменьшать и увеличивать масштаб по своему желанию, если того не требует дизайнерская задумка. К примеру, слишком малый шрифт ухудшает читабельность текста и в таком случае необходимо использовать приближение.

Мета-тег viewport — относительно новый, поэтому на данный момент поддерживается не всеми браузерами, особенно это касается старых моделей смартфонов. В таких случаях есть смысл использовать некоторые старые методы, которые позволяют браузеру идентифицировать страничку, как оптимизированную под мобильный веб. Это можно сделать, с помощью следующий мета-тегов:

Подробнее об этих и других специфических мобильных тегах можно почитать .

Возможные параметры для мета-тега viewport

Таблица совместимости с viewport.

Два вьюпорта

Итак, допустим, что вьюпорт слишком узок для нашего CSS-шаблона. Очевидное решение - сделать вьюпорт шире. Однако, для начала разделим понятие вьюпорта на две части: визуальный вьюпорт и вьюпорт страницы.

Очень неплохо концепцию вьюпортов объясняет Джордж Камминс (George Cummins) на Stack Overflow :

Представьте вьюпорт страницы как большое изображение с неизменными размерами и формой. Теперь представьте меньшую по размеру рамку, через которую вы смотрите на это большое изображение. Эта рамка окружена непроницаемым материалом, который не дает вам увидеть большое изображение полностью, за исключением отдельных его частей. Часть большого изображения, которая видна через рамку, и будет визуальным вьюпортом. Если отойти с рамкой от большого изображения (zoom out, т.е. уменьшить масштаб), то можно увидеть сразу все изображение, или же подойти поближе (zoom in, увеличить масштаб), тогда можно будет рассмотреть только часть изображения. Также, можно поворачивая рамку менять ее ориентацию (на портретную или ландшафтную), при этом размер и форма большого изображения (вьюпорта страницы) всегда остается неизменной.

Визуальный вьюпорт - часть страницы, которая видна в данный момент на экране. Пользователь может воспользоваться прокруткой, чтобы изменить видимую часть страницы, или использовать масштабирование для изменения размеров визуального вьюпорта.

Разметка страницы, особенно если ее ширина задана в процентах, рассчитывается относительно вьюпорта страницы , который значительно шире визуального вьюпорта.

Таким образом, -элемент изначально принимает ширину вьюпорта страницы и дальше CSS ведет себя так, если бы экран был намного шире экрана телефона. Это обеспечивает сайту такое же поведение, как и в десктопном браузере.

Какой же ширины сам визуальный вьюпорт? Это зависит от браузера. Safari iPhone использует 980px, Opera - 850px, Android WebKit - 800px, а IE - 974px.

Некоторые браузеры ведут себя по-своему:

Symbian WebKit пытается приравнять вьюпорт страницы к визуальному вьюпорту, и это означает, что элементы с процентной шириной могут вести себя непредсказуемо. Однако, если страница не умещается в визуальном вьюпорте из-за абсолютных величин браузер растягивает вьюпорт страницы максимум до 850-ти пикселей.

Samsung WebKit делает вьюпорт страницы равным по ширине самого широкого элемента.

На BlackBerry при масштабе в 100% вьюпорт страницы равен будет визуальному вьюпорту при любых раскладах.

Масштабирование (Zooming)

Оба вьюпорта измеряются в CSS-пикселях. Однако, во время масштабирования размеры визуального вьюпорта меняются (при увеличении масштаба на экране умещается меньшее количество CSS-пикселей), в то время как размеры вьюпорта страницы остаются неизменными. (Если бы это было не так, браузер постоянно совершал бы reflow страницы из-за пересчета процентной ширины.)

Понимание вьюпорта страницы

Для лучшего понимания размеров вьюпорта страницы следует взглянуть на то, что происходит при наименьшем возможном масштабе страницы. Большинство мобильных браузеров по-умолчанию отображают любую страницу в наименьшем масштабе.

Дело в том, что размеры вьюпорта страницы браузеров полностью совпадают с экраном при максимально уменьшенном масштабе и поэтому равны визуальному вьюпрту.

Таким образом, ширина и высота вьюпорта страницы равна всему тому, что отображено на экране при наименьшем масштабе. При увеличении масштаба пользователем эти размеры остаются неизменными.

Ширина вьюпорта страницы всегда неизменна. Если изменить ориентацию экрана смартфона, визуальный вьюпорт изменится, но в то же время мобильный браузер приспособится к новой ориентации, немного увеличив масштаб таким образом, что вьюпорт страницы снова станет таким же по ширине, как и визуальный вьюпорт.

Это повлияло на высоту вьюпорта страницы, которая сейчас намного меньше, чем при портретной ориентации. Но для разработчиков больше важна ширина, а не высота.

Android и target-densitydpi

У устройств на платформе андроид есть свой атрибут для viewport, который выключает масштабирование для дисплеев с различным разрешением.

На устройствах с HDPI (240dpi) не будет масштабирования.

Такая запись означает, что не будет масштабирования ни на каком из устройств на Андроиде.

Нет сомнения, что вы используете мета тег viewport при работе с адаптивными шаблонами. Но знаете ли вы, что мета тег viewport может быть полезен и для неадаптивных шаблонов? Если у вас нет времени для конвертации шаблона своего проекта в адаптивный, то следует прочесть материалы данного урока, чтобы использовать мета тег viewport для улучшения вида вашего дизайна на мобильных устройствах.

Обычное использование мета тега viewport

Обычно мета тег viewport используется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах. Вот пример.

Использование мета тега viewport в неадаптивном шаблоне

По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш дизайн может плохо соответствовать данному диапазону. Значение может быть для шаблона слишком большим или маленьким. Ниже приводится два примера. которые используют мета тег viewport для улучшения внешнего вида неадаптивного шаблона на мобильных устройствах.

Пример

Посмотрите на сайт Themify с мобильного устройства.

Левый снимок экрана демонстрирует внешний вид сайта без использования мета тега viewport . Можно заметить, что страница касается обеих сторон экрана. Если добавить мета тег viewport с указанием ширины 1024px, то будет оставаться зазор слева и справа.

Другой пример

Если ваш дизайн слишком узкий, то он тоже будет выглядеть коряво. Допустим, ширина контейнера 700px и он не адаптируется. В таком случае внешний вид будет как ниже приведенном слева снимке экрана - широкая белая полоса слева.

Проблему легко устранить установив ширину окна просмотра 720px. Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 720px.

Общая ошибка

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай - сочетание user-scalable=no или maximum-scale=1 с initial-scale=1 . Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!

Привет всем и сегодня мы поговорим о том, что такое viewport и как его использовать.

Для того, чтобы понять, что это такое, вам нужно какое-нибудь мобильное устройство. Теперь давайте создадим простую html страничку такого содержания:

test post

this is a test post

another post

this is pretty cool

Теперь откроем нашу страницу на мобильном устройстве и что мы увидим? А увидим мы, что текст слишком маленький и читать его сложно. Однако, если мы добавим тег следующего содержания в тег head

То теперь текст выглядит нормально. Вот рисунок. Слева без тега , а справа с ним

Почему же так происходит? Дело в том, что браузер по-умолчанию думает, что сайт сделан для десктопной версии браузера и пытается полностью вместить его в окно вашего смартфона. Задав же тег , мы говорим браузеру телефона, что ширина просмотра равна ширине смартфона. Вот такой простой тег, но он очень помогает при создании мобильной версии сайта.

Также можно задать масштаб. Для этого используется inital-scale

Если вы хотите запретить пользователю изменять масштаб страницы на его смартфоне, то можете прописать следующее:

Но нужно быть аккуратным, т.к. бывает, что текст достаточно трудно прочитать и приходится его увеличивать, но если это будет запрещено, то вы доставите неудобства пользователю.

Поддержка браузерами

Android поддерживает, но до версии 2.2 . начальный масштаб равен 1.0

Symbian, Nokia 40 серии, Motorola, Opera mobile/mini и NetFront не поддерживают

IE поддерживает с 6 версии

BlackBerry поддерживает с версии 4.2.1

Как вы можете видеть, поддержка пока что неполная, но вы уже можете использовать этот тег, т.к. большинство новых смартфонов уже его понимают.

Итак, на этом я заканчиваю эту статью, спасибо за внимание.

Мета тег viewport отвечает за область просмотра сайта на экране. Проще говоря - это настройка ширины экрана для сайта. Например, сайт на мониторе ПК будет корректно выглядеть, а на смартфоне будет плохо читаем, т.к. слишком мелкий шрифт.

Для решения проблемы с отображением сайта на небольших разрешениях браузеров было придумано новое направление - адаптивная верстка сайта , с целью сделать сайт удобным для пользователей с различной шириной браузера.

Мета тег viewport позволяет настроить ширину области просмотра и масштаб страницы. По определению viewport - это видимая пользователю область сайта без прокрутки.

... ...

Выше было указано только два атрибута width и initial-scale , которые отвечают за ширину и масштаб соответственно. Через запятую можно задать еще и другие параметры. Рассмотрим все возможные атрибуты.

• width - устанавливает ширину области просмотра браузером. Принимает целочисленное значение (от 200 до 10000) в пикселях или device-width . Этот атрибут обязателен для адаптивных версток сайта.
• height - устанавливает высоту области просмотра браузером. Принимает целочисленное значение в пикселях (от 200 до 10000) или значение device-height . Поскольку определяющим фактором является ширина, то высоту указывать не обязательно для адаптивной верстки.
• initial-scale - коэффициент масштабирования. Принимает вещественные значения (от 0.1 до 10.0). Значение "1.0" стоит по умолчанию, что означает каждый физический пиксель соответствует аппаратному пикселю.
• user-scalable - устанавливает можно ли пользователю масштабировать страницу. Принимает два значения: no/yes
• minimum-scale - задает минимальный масштаб. Измеряется в вещественных числах.
• maximum-scale - задает минимальный масштаб. Измеряется в вещественных числах.

Примеры с viewport

Новые смартфоны имеют высокое разрешение. В связи с этим надо делать уточнению по атрибуту initial-scale , который отвечает за масштабирование. Дело в том, что делая масштаб 1.0, мы добьемся слишком маленького текста, который невозможно будет читать. Поэтому применяется следующая таблица при преобразовании масштаба для устройств с высокой плотностью пикселей.