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

Когда мы хотим настроить окно браузера на нашем устройстве, мы, как правило, используем HTML тег . Однако, как ни странно, мета-тег не является «нормативным» — его нет в официальном стандарте W3C.

Мета-тег viewport был впервые внедрён компанией Apple в iPhone, а затем и другими поставщиками браузеров. Сегодня он широко используется благодаря популярности iOS, Android и других платформ для планшетов и смартфонов.

Так как мета-тег viewport предназначен исключительно для настройки разметки, можно сказать, что он по праву относится к CSS. Именно поэтому W3C стремится стандартизировать новый метод адаптации, при котором управление окном переносится из HTML в CSS.

CSS правило @viewport

С новым правилом @viewport мы имеем то же самое управление окном, что и с мета-тегом, за исключением того, что такое управление осуществляется исключительно через CSS. Также как и при использовании мета-тега, рекомендуется устанавливать ширину окна браузера, используя не зависимую от устройства device-width:

@viewport {
width: device-width;
}

На сегодняшний день @viewport используется программистами для “snap mode” в IE10 - функция Windows 8, позволяющая работать в мультиоконном режиме. Как ни странно, IE10 игнорирует мета-тег, если размер окна менее 400 пикселей, что приводит к невозможности оптимизации сайтов, использующих этот мета-тег, к таким маленьким окнам. Чтобы это исправить, программисты должны использовать упомянутый выше параметр device-width, или определить правило @viewport в медиа-запросе.

Использование @viewport в медиа-запросах

Мы можем использовать @viewport в медиа-запросах. Например, следующий медиа-запрос используется для настройки разметки окна шириной менее 400 пикселей (например, мультиоконный режим в IE10) на ширину 320 пикселей.

@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }
...
}

В данном примере, если устройство настроено на диапазон разрешения от 640 до 1024 пикселей, правило @viewport масштабирует окно до 640 пикселей.

@media screen and (min-width: 640px) and (max-width: 1024px) {
@viewport { width: 640px; }
...
}

Новые дескрипторы @viewport

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

zoom

Дескриптор zoom - это эквивалент initial-scale в мета-теге. Также как и minimum-scale и maximum-scale, существуют дескрипторы для max-zoom и min-zoom:

@viewport {
width: device-width;
zoom: 2;
}

user-zoom

Дескриптор user-zoom эквивалентен параметра user-scalable

@viewport {
width: device-width;
user-zoom: fixed;
}

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

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

Пока что к правилу @viewport необходимо добавлять вендорный префикс:

@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}

Конечно же, нам до сих пор необходимо включать мета-тег viewport в html страницу, т.к. в ближайшее время он никуда не денется. Но уже не так страшно смотреть в будущее - добавление правила @viewport всего лишь делает наши сайты и приложения готовыми к переменам

Общая ошибка

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

Последнее обновление: 03.05.2016

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

Обычная веб-страница

Это стандартная веб-страница, которая в обычном браузере будет выглядеть следующим образом:

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

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

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

Вся видимая область на экране браузера описывается понятием Viewport . По сути viewport представляет область, в которую веб-браузер пытается "впихнуть" веб-страницу. Например, браузер Safari на iPone и iPod определяет ширину viewport по умолчанию равной 980 пикселям. То есть, получив страницу и вписав в viewport с шириной 980 пикселей, браузер сжимает ее до размеров мобильного устройства. Например, если ширина экрана смартфона составляет 320 пикселей, то до этого размера потом будет сжата страница. И ко всем элементам страницы будет применен коэффициент масштабирования, равный 320/980.

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

При этом для каждого браузера устанавливается своя ширина области viewport, необязательно 980 пикселей. Другие браузеры могут поддерживать в качестве начальной ширины другие значения. Но они также будут выполнять масштабирование.

Чтобы избежать подобной не очень приятной картины, следует использовать метатег viewport. Он имеет следующее определение:

В атрибуте content мета-тега мы можем определить следующие параметры:

Теперь изменим предыдущий пример веб-страницу, использовав метатег:

Обычная веб-страница

Веб-страничка определенно выглядит лучше благодаря использованию метатега viewport. Используя параметр width=device-width мы говорим веб-браузеру, что в качестве начальной ширины области viewport надо считать не 980 пикселей или какое-то другое число, а непосредственную ширину экрана устройства. Поэтому затем веб-браузер не будет проводить никакого масштабирования, так как у нас ширина viewport и ширина одинаковы.

Мы также можем использовать другие параметры, например, запретить пользователю масштабировать размеры страницы:

Нет сомнения, что вы используете мета тег 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 при работе с адаптивными шаблонами. Но знаете ли вы, что мета тег 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 отвечает за область просмотра сайта на экране. Проще говоря - это настройка ширины экрана для сайта. Например, сайт на мониторе ПК будет корректно выглядеть, а на смартфоне будет плохо читаем, т.к. слишком мелкий шрифт.

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

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