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

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

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

Обычный сайт

Это обычный сайт

Запустив данную страничку в эмуляторе Opera Mobile, получим следующую картину:

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

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

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

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

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

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

Общее объявление метатега следующее:

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

Параметр	Значения	Описание
	Принимает целочисленное значение в пикселях или значение device-width	Устанавливает ширину области viewport
	Принимает целочисленное значение в пикселях или значение device-height	Устанавливает высоту области viewport
		Задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования
		Указывает, может ли пользователь с помощью жестов масштабировать страницу
	Число с плавающей точкой от 0.1 и выше	Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования
	Число с плавающей точкой от 0.1 и выше	Задает максимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования

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

Обычный сайт

Это обычный сайт

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

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

Статья, в которой познакомимся с метатегом viewport. Рассмотрим, какие значения может принимать атрибут content данного метатега, а также как его настроить для адаптивного и фиксированного сайта.

Что такое viewport?

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

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4" до 6". А самую большую - мониторы компьютеров, размеры диагоналей которых могут превышать 24".

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

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

Но и у адаптивной разметки появились проблемы после того как появились смартфоны с высокой плотностью пикселей и, следовательно с высоким разрешением. Чтобы более детально разобраться в этой ситуации рассмотрим следующий пример, в котором сравним 2 устройства.

Первое устройство - это смартфон Apple iPhone 3 (диагональ 3.5"). Данный телефон не имеет высокую плотность пикселей. У данной модели она составляет 163ppi (меньше 200ppi). Физическое разрешение данного смартфона составляет 320x480. Такое разрешение соответствует диагонали, если его сопоставить с разрешением мониторов настольных устройств (компьютеров). Т.е. на веб-странице этого смартфона, текст, выполненный размером 16px, будет также хорошо читаемым как на мониторе компьютера.

Второе устройство - это смартфон Apple iPhone 4. Он имеет диагональ такую же как у смартфона Apple iPhone 3, т.е. 3.5". Но отличается от него тем, что имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение - 640x960 при тех же размерах экрана. Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше. Таким образом, текст будет реально выглядеть на 8px. Такая страница будет уже трудночитаемой. Чтобы сделать эту страницу пригодной для чтения, её представление необходимо увеличить в горизонтальном и вертикальном направлении в 2 раза (отмасштабировать).

Назначение метатега viewport

Метатег viewport был разработан компанией Apple для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Другими словами meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi). Данный метатег предназначен в большой степени для адаптивных сайтов, но с помощью него можно улучшить представления веб-страниц, имеющих фиксированную или гибкую разметку.

Добавление meta viewport к веб-странице

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

Настройка meta viewport для адаптивных веб-страниц

Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:

Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить. В данном случае эта информация касается viewport.

Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

width=device-width
initial-scale=1

Рассмотрим каждый из них более подробно.

Первый параметр (width=device-width) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству (device-width). Данная ширина (CSS) - это не физическое разрешение экрана. Это некоторая величина независящая от разрешения экрана. Она предназначена для того, чтобы мобильный адаптивный дизайн сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана.

Например, смартфон iPhone4 с физическим разрешением 640x960 имеет CSS разрешение 320x480. Это означает то, что сайт с метатегом viewport (width=device-width) на этом устройстве будет выглядить так как будто бы это устройство имеет разрешение 320x480 (в данном случае вместо 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 и т.д.

Рассмотрим несколько примеров:

Apple iPhone 3: физическое разрешение 320x480, плотность пикселей - 163ppi. Плотность пикселей меньше 200, следовательно, CSS коэффициент равен 1. CSS разрешение будет равно физическому, т.е. 320x480.
Apple iPhone 6: физическое разрешение 750x1344, плотность пикселей - 326ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 326/150=2 (2.2 округляем до 2). CSS разрешение будет равно 375x667.
LG G4: физическое разрешение 1440x2560, плотность пикселей - 538ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 538/150=4 (3.6 округляем до 4). CSS разрешение будет равно 360x640.
Galaxy S3 mini: физическое разрешение 480x800, плотность пикселей - 233ppi. Плотность пикселей больше 200, следовательно, CSS коэффициент будет равен 1.5. CSS разрешение будет равно 320x533.
Galaxy S5: физическое разрешение 1080x1920, плотность пикселей - 441ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 441/150=3. CSS разрешение будет равно 360x640.

Второй параметр initial-scale - устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.

meta viewport и не адаптивные страницы

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

Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.

Осуществляется это тоже с помощью установления параметру width значения device-width . Т.е. для не адаптивных сайтов в раздел head необходимо добавить следующую строчку:

Масштабирование неадаптивного дизайна под размер устройства (смартфона)

Кроме того, разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.

Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

Дополнительные параметры meta viewport

Кроме основных параметров, тег meta viewport содержит много других.

Вот некоторые из них:

minimal-scale - задаёт минимальный масштаб;
maximal-scale - устанавливает максимальный масштаб;
user-scalable - указывает, может ли пользователь управлять масштабом или нет.

Примеры viewport с использованием дополнительных параметров:

Для настройки окна браузера можно использовать специальный тег HTML следующего вида: . Однако следует учесть, что в официальный стандарт W3C он не включён — его впервые ввела в iPhone компания Apple. А вслед за ней и остальные компании — поставщики браузеров. Мета-тег сегодня активно используется, благодаря возросшей популярности Android, iOS и остальных платформ, на которых работают смартфоны и планшеты.

Исключительное предназначение «Meta name viewport» — для настройки разметки страницы. Поэтому его можно отнести к CSS, чего и хотят добиться в стандарте W3C. В статье мы рассмотрим использование мета-тега Viewport в html.

Viewport

Проведём небольшой эксперимент — сделаем элементарную html-страницу со следующей разметкой:

Welcome, USER!

Сохраним её и откроем в смартфоне:

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

Hello world!

Текст хорошо читается, страница отображается корректно. Почему так?

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

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

Уменьшение масштаба и частичное отображение несёт в себе определённый смысл. Так как мобильный браузер, видя страницу, определяет, что она предназначена для стационарного ПК. Это «определение» верно для значительного числа интернет-сайтов. Далее, он устанавливает ширину в 980 пикселей (указано для Safari) для всей интернет-страницы и начинает максимально уменьшать масштаб, чтобы наилучшим образом показать её на экране. Открывая такие сайты мы видим их полностью умещёнными по ширине в экран, но в несколько раз меньше своих реальных размеров.

Используя мета-тег Вивпорт, мы оптимизируем страницы для смартфонов и задаём правила, благодаря которым область просмотра «будет вести себя правильно». В рассмотренном примере, значение «device-with» указывает браузеру устройства, что область просмотра имеет такую же ширину, что и ширина самого устройства. Если эта ширина экрана устройства равна 300 пикселей, то можно указать width=300px, но смартфоны разные и использовать «device-with» оптимальней.

Примеры

Можно указать начальный масштаб страницы и её запретить масштабирование. Рассмотрим пару вариантов:

Здесь мы имеем указание — ширина страницы равна ширине устройства (width=device-width), начальный масштаб (initial-scale=1.0), максимальный масштаб (maximum-scale=1.0) и запрет для пользователя на изменение масштаба (user-scalable=no).

Это более простой и распространённый вариант.

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

Устаревшие модели смартфонов не поддерживают относительно новый мета-тег Вивпорт. Для них есть:

и другие.

Параметры Viewport

Определение ширины — «width». Можно указывать целое положительное значение от 200 до 10 тысяч пикселей. Или использовать постоянное специальную константу, которую мы уже рассмотрели «device-width». Если константа или значение не будет указано, то будет использовано значение по-умолчанию: для Opera — 850, для Safari — 980, для Android Webkit — 800, а для IE — 974 пикселя.
Определение высоты «height». Можно задавать значение от 223 до 10 000 пикселей, или указать константу «deviceheight», но лучше вообще игнорировать.
Определение начального масштаба страницы «initial-scale». Используется целое число от 0,1 до 10. Если указано 1.0 — масштабирование производиться не будет. Если 2 — увеличение в 2 раза.
Разрешение пользователю на изменение масштаба «user-scalable». Принимает только два значения — да («yes») или нет («no»), последнее — запрет на изменение.
Минимальный и максимальный масштабы «minimum-scale» и «maximum-scale». Указывается в виде чисел от 0,1 до 10. Если 1.0 — масштабирование запрещено.