Всё, что вы хотели знать о meta-теге viewport. Viewport meta tag, масштабирование веб страниц в мобильных браузерах

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

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

html

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”.

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

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

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

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

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

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

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

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

Посмотрим на возможные правила для использования тега:

1. Width

Этим мы указываем целое число в пикселях (от 200px до 10000px) или же "device-width" . Это задает ширину viewport, если же ширина не указана вам, то берется автоматически:

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

2. Height

Работает по тому же принципу, что и width . Однако зачастую в 99% случаев он просто напросто не используется, так что можете его не выставлять, если не знаете нужен он вам или нет. Во всяком случае можете поэкспериментировать с ним...

3. Initial-scale

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

4. User-scalable

Задает возможность изменения масштаба страницы. Может наследовать значения yes или же no . В браузере Safari стандартно стоит значение yes ,

5. Minimum-scale и maximum-scale

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

Теперь перейдем непосредственно к примерам использования.

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

Точно по такому же примеру можно пойти, если у вас контент не широкий (не обрезается браузером), а наоборот узкий (появляется пустое место где-то):

Типичная ошибка, которая может возникнуть у вас при использовании мета тега viewport исходит из того, что вы будете использование значение initial-scale=1 для неадаптивных шаблонов. Что не так? А не так здесь то, что этот параметр приведет к отрисовке 100% страницы без масштабирования. Таким образом пользователю нужно будет самому устанавливать масштаб или же много и долго прокручивать страницу.

К ошибке также отнести можно и совместное использование параметров user-scalable=no или maximum-scale=1 вместе с initial-scale=1 . Этим мы отключим возможность масштабирования на сайте (на мобильных шаблонах данная фишка может конечно пригодится, но едва ли...). Так как мы отключим масштабирование, то и увидеть всю страницу шанса у нас не будет.

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

Некоторые считают, что прокрутка влево или вправо очень плохо и некрасиво. Конечно же это не плохо, это скорее на мой взгляд неудобно, но порой эта необходимость бывает нужна. Например, у моего заказчика есть сайт. Он имеет полную и мобильную версию, каждая из этих версий - это разные шаблоны. Соответственно в шаблоне для десктопа нет смысла делать какие-то сложные адаптации и навороты для телефонов, достаточно тега viewport, а в мобильном да, все под телефоны. Тут уже кому как удобнее будет пользоваться, 2 альтернативы так скажем... Всем спасибо, удачи!

Статья, в которой познакомимся с метатегом 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 с использованием дополнительных параметров:

Я уверен, что многие используют мета-тег Viewport для масштабирования дизайна, но знаете ли вы, что этот тег также может быть очень полезен для мобильных устройств? Если у вас нет времени, чтобы преобразовать ваш проект, тем не менее, вам следует прочитать эту статью о том, как использовать тег Viewport для улучшения внешнего вида вашего проекта на мобильных устройствах.

Главное использование тега Viewport

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

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

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

Пример

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

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

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

Вы можете просто исправить это, установив ширину окна в 720px. Ширина вашего дизайна не меняется, но iPhone будет масштабировать, чтобы поместиться в 720px.

Распространенная ошибка

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