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

В мобильной версии Safari появился "мета тег viewport" (viewport meta tag), который позволяет веб-разработчикам контролировать размер окна просмотра и масштаб страницы. Многие другие мобильные браузеры также поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта. Документация Apple хорошо описывает, как веб-разработчики могут пользоваться этим тегом. Но мы должны были провести расследование, чтобы точно выяснить, как его можно реализовать в Fennec. Например, в документации к Safari сказано, что контент представляет собой «список значений, разделенных запятыми», но существующие браузеры и веб-страницы используют любое сочетание запятых, точек с запятой и пробелов в качестве разделителей.

Узнать больше о вьюпортах в разных мобильных браузерах можно в Рассказе о Двух Viewport"ах на quirksmode.org.

Основы Viewport

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

Свойство width определяет размер окна просмотра. Он может быть установлен на определенное количество пикселей, скажем, width=600 или на специальное значение device-width , которое означает ширину экрана в пикселях CSS в масштабе 100%. (Есть также соответствующие значения height и device-height , которые могут быть полезны для страниц с элементами, которые изменяют размер или положение на основе высоты окна просмотра).

Свойство initial-scale контролирует уровень масштабирования при первой загрузке страницы. Свойства maximum-scale , minimum-scale и user-scalable определяют, как пользователям разрешено увеличивать или уменьшать страницу.

Пиксель это не пиксель

В последние годы разрешение экрана увеличилось до такого размера, что отдельные пиксели трудно отличить человеческим глазом. Например, последние смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920-1080 пикселей (~400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы в меньшем физическом размере, переведя несколько аппаратных пикселей для каждого пикселя CSS. Первоначально это вызывало проблемы удобства использования и удобства чтения на многих веб-сайтах, оптимизированных для сенсорного экрана. Питер-Пол Кох написал об этой проблеме в «Пиксель это не пиксель» .

На экранах с высоким разрешением экрана страницы с initial-scale=1 будут эффективно масштабироваться браузерами. Их текст будет плавным и четким, но их растровые изображения, вероятно, не будут использовать полное разрешение экрана. Чтобы получить более четкие изображения на этих экранах, веб-разработчики могут создать изображения - или целые макеты - в более высоком масштабе, чем их конечный размер, а затем масштабировать их с помощью свойств CSS или viewport. Это соответствует спецификации CSS 2.1 , которая гласит:

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

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

Отношение пикселей по умолчанию зависит от плотности дисплея. На дисплее с плотностью менее 200 точек на дюйм отношение равно 1.0. На дисплеях с плотностью от 200 до 300 точек на дюйм отношение равно 1.5. Для дисплеев с плотностью более 300 точек на дюйм отношение представляет собой целостный пол (плотность / 150 точек на дюйм). Обратите внимание, что коэффициент по умолчанию равен true только тогда, когда масштаб viewport равен 1. В противном случае соотношение между пикселями CSS и пикселями устройства зависит от текущего уровня масштабирования.

Ширина Viewport и ширина экрана

Сайты могут устанавливать свой viewport на определенный размер. Например, определение « width=320, initial-scale=1 » может использоваться для точного размещения на маленьком дисплее телефона в портретном режиме. Это может вызвать проблемы, когда браузер не отображает страницу большего размера. Чтобы исправить это, браузеры, если необходимо, увеличат ширину окна просмотра, чтобы заполнить экран по заданной шкале. Это особенно полезно для устройств с большим экраном, таких как iPad. (Аллен Пайк Выбор видового экрана для IPad сайтов имеет хорошее объяснение для веб-разработчиков.)

Для страниц, задающих начальный или максимальный масштаб, это значит, что свойство width фактически переводит в минимальную ширину viewport. Например, если ваш макет должен иметь ширину не менее 500 пикселей, вы можете использовать следующую разметку. Когда экран шириной более 500 пикселей, браузер будет расширять область просмотра (а не увеличивать), чтобы она соответствовала экрану:

Другими доступными являются minimum-scale , maximum-scale , и user-scalable . Эти свойства влияют на начальный масштаб и ширину, а также ограничивают изменения уровня масштабирования.

Не все мобильные браузеры обрабатывают изменения ориентации таким же образом. Например, Mobile Safari часто просто увеличивает масштаб страницы при смене с вертикальной ориентации на горизонтальный, вместо того, чтобы выкладывать страницу так, как если бы она была первоначально загружена в "ландшафт". Если веб-разработчики хотят, чтобы их настройки масштаба оставались неизменными при переключении ориентации на iPhone, они должны добавить значение maximum-scale , чтобы предотвратить это масштабирование, которое иногда имеет нежелательный побочный эффект, который мешает пользователям изменять масштаб:

Общепринятые viewport для мобильных и планшетных устройств

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

Спецификации

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

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

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

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

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

Последнее обновление: 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 мета-тега мы можем определить следующие параметры:

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

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

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