Так уж сложилось, что мобильные браузеры появились сравнительно недавно, а сайтов в сети к тому времени уже было огромное количество. Естественно, все эти сайты совсем не были оптимизированы под маленькие экраны смартфонов, а смартфоны в свою очередь, вынуждены были полагать, что все сайты в ширину занимают где-то около 1000px (980px в сафари). Нужно было как-то решать сложившуюся ситуацию и в apple придумали метатег , который по традиции потом сперли все остальные производители браузеров.

Давайте рассмотрим типично-эпичную верстку сайта:

html

Hello world

Hello world

Откроем его в мобильном браузере. Вот что мы увидим:

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

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

html

Что получилось:

Ну вот, теперь все намного лучше. Обозначив width=device-width , мы сказали браузеру, что нам нужна область просмотра контента, равная ширине экрана мобильного устройства.

Можно вручную задать значение для width. Например content="width=320px" , но этого не рекомендуется делать, потому-что различные смартфоны могут иметь абсолютно различную ширину экрана.

Очень распространенным вариантом является:

html

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

Также часто используется следующий вариант:

html

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

  1. при загрузке страницы она не будет смасштабирована
  2. страница займет всю ширину мобильного браузера
  3. запрещено любое пользовательское масштабирование
  4. доступен только горизонтальный и вертикальный скролл

Используйте эту конфигурцию, только в том случае, если знаете, что делаете.

Давайте разберем допустимые параметры и их значения, доступные в мета теге viewport

width

Целое число (от 200px - 10,000px) или “device-width”.

Задает ширину viewport. Если нирина viewport не указана, то:

  • для мобильного Safari это 980px
  • Opera - 850px
  • Android WebKit - 800px
  • IE - 974px

height

Целое число (от 223px до 10,000px) или “device-height”

задает высоту viewport. 99% случаев, просто не обращайте внимания на этот параметр, но если сильно надо – пробуйте и экспериментируйте. Удачи..

initial-scale

1.0 - не масштабировать. Задает масштаб страницы. Увеличиваем значение – увеличиваем масштаб.

user-scalable

Доступные значения no или yes

Задает возможнось изменения масштаба страницы. По-умолчанию установлено как yes в Safari.

minimum-scale и maximum-scale

Доступные значения (от 0.1 до 10).

1.0 - не масштабировать. Определяет минимальный и максимальный масштаб viewport соответственно.

По-умолчанию в мобильном Safari minimum-scale = "0.25" , maximum-scale = “1.6”.

Совет: Не используйте мета-теги (в том числе и этот), пока не разобрались, зачем все это нужно. И тестируйте все в различных мобильных браузерах. Удачи!

Последнее обновление: 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.

Текст на не адаптированном дизайне сайта слишком мелкий и очень тяжело его читать и воспринимать, нужно постоянно "гладить" экран, увеличивая текст на сайте, а также перемещаться вправо, когда читаешь. Это очень не удобно. Мета тег Viewport решает эту проблему.

Правильное написание мета тега Viewport

Таким образом, мы сообщаем браузеру, что область просмотра содержимого сайта (контента) должна быть равна ширине экрана смартфона или другого мобильного устройства. А также, что масштабировать содержимое не нужно.

Вот скриншот экрана мобильного устройства без мета тега Viewport, точнее он закомментирован :

А вот тот же сайт, только с использованием мета тега Viewport:

Если вы читаете это с мобильного устройства - .

Доступные параметры и значения мета тега Viewport

width

Доступные значения от 200px до 10000px. Или можно использовать ширину устройства device-width. По умолчанию, если ширина не задана, то она имеет следующие параметры: мобильный Safari - 980px, Opera - 850px, Android WebKit - 800px, Internet Explorer - 974px.

height

Доступные значения от 223px до 10000px. Или можно использовать высоту устройства device-height. Обычно этот параметр вообще не указывают в написании кода.

initial-scale

Доступные значения от 0.1 до 10. Это масштаб страницы. Значение 1.0 или просто 1 - означает без масштабирования. Чем больше значение initial-scale - тем больше масштаб.

user-scalable

Доступные значения no или yes. Параметр определяет можно ли посетителю изменять масштаб страницы. По умолчанию параметр user-scalable установлен как yes.

minimum-scale и maximum-scale

Доступные значения от 0.1 до 10. Параметр определяет минимальные и максимальный масштаб, который может изменить для себя посетитель страницы. Значение 1.0 или просто 1 - означает без масштабирования. Значения по умолчанию в мобильном браузере Safari minimum-scale="0.25", а maximum-scale="1.6".

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

Всем удачи и добра!

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

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





Test


test post


this is a test post


another post


this is pretty cool


New Post

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

Viewport

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

Welcome, USER!

Welcome, USER!

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

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

Hello world!

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 — масштабирование запрещено.