Chrome Chrome  Microsoft edge
Развернуть

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

Полное описание метатега viewport и его атрибутов. Примеры, примечания и рекомендации по адаптации сайта под мобильные устройства. А также дополнительные и полезные метатеги: HandheldFriendly , MobileOptimized и apple-mobile-web-app-capable .

  • Метатег viewport
    • Атрибуты метатега viewport
  • Дополнительные и полезные метатеги
    • Meta-тег HandheldFriendly
    • Meta-тег MobileOptimized
    • Meta-тег apple-mobile-web-app-capable
  • Рекомендованный набор метатегов

Метатег viewport

Meta-тег viewport сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Этот тег необходимо добавлять в секцию head .

Примечание : метатег viewpost не входит в формальный стандарт и является частью спецификации CSS Device Adaptation (http://goo.gl/FSTGbn). Но пока эта спецификация не завершена и не применяется повсеместно, рекомендуется использовать meta-тег viewport отдельно и в сочетании со стилями @viewport в целях совместимости.

Пример :

Атрибуты метатега viewport

Meta-тег viewport может иметь следующие атрибуты, указанные через запятую (,) :

width - ширина области просмотра.

Значение атрибута является целое неотрицательно число от 200 до 10000 пикселей или константа device-width , которая задаёт ширину страницы в соответствии с размером экрана.

Если значение не задано, по умолчанию устанавливается - в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.

Примечание : для сайтов с адаптивным дизайном рекомендуется использовать: width=device-width .

height - высота области просмотра.

Значением атрибута является целое неотрицательно число от 233 до 10000 пикселей или константа device-height , которая задаёт высота страницы в соответствии с размером экрана.

Примечание : если указан атрибут width , указывать атрибут height не обязательно.

initial-scale - начальный масштаб страницы.

0.1 до 1.0 . Значение 1.0 определяет масштаб 1:1 , т.е. «не масштабировать».

Примечание : в некоторых операционных системах (iOS, Windows Phone и т.д.) ширина страницы, при повороте, остаётся неизменной. Вместо перераспределения контента выполняется его масштабирование. Поэтому рекомендуется использовать: initial-scale=1.0 .

user-scalable - доступность масштабирования страницы пользователем.

Значение атрибута является логическое «yes » (1) - можно масштабировать или «no » (0) - нельзя масштабировать.

Примечание : рекомендуется использовать значение «yes » , а т.к. оно установлено по умолчанию, то user-scalable можно и не указывать.

minimum-scale - минимальный масштаб области просмотра.

Значением атрибута является число с точкой от 0.1 до 1.0 . В мобильном браузере Safari по умолчанию 0.25. Значение 1.0 определяет масштаб 1:1 , т.е. «не масштабировать».

maximum-scale - максимальный масштаб области просмотра.

Значением атрибута является число с точкой от 0.1 до 1.0 . В мобильном браузере Safari по умолчанию 1.6. Значение 1.0 определяет масштаб 1:1 , т.е. «не масштабировать».

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

Дополнительные и полезные метатеги

Meta-тег HandheldFriendly определяет оптимизирована ли страница сайта под мобильные устройства на Palm и Blackberry, в таком браузере как AvantGo. Сейчас распознаётся и многими др. мобильными браузерами.

Пример :

Meta-тег MobileOptimized (http://goo.gl/ZpLjZz) задаёт ширину области просмотра в мобильных браузеров IE Mobile или Pocket IE. Является аналогом атрибута width в meta-теге viewport .

Пример :




Meta-тег apple-mobile-web-app-capable (http://goo.gl/VGDYQC) позволяет странице работать в полноэкранном режиме, актуален для мобильных устройств Apple.

Пример :

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




Is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.

Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

This is done because many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.

Enter viewport meta tag

However, this mechanism is not so good for pages that are optimized for narrow screens using media queries - if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.

To mitigate this problem, Apple introduced the "viewport meta tag" in Safari iOS to let web developers control the viewport"s size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple"s documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari"s documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

Learn more about viewports in different mobile browsers in A Tale of Two Viewports at quirksmode.org.

Viewport basics

A typical mobile-optimized site contains something like the following:

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width , which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale , minimum-scale , and user-scalable properties control how users are allowed to zoom the page in or out.

A pixel is not a pixel

In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920-1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel .

On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification , which says:

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm"s length.

For web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.

The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(density /150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

Viewport width and screen width

Sites can set their viewport to a specific size. For example, the definition "width=320, initial-scale=1" can be used to fit precisely onto a small phone display in portrait mode. This can cause problems when the browser doesn"t render a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices like the iPad. (Allen Pike"s Choosing a viewport for iPad sites has a good explanation for web developers.)

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:

Other that are available are minimum-scale , maximum-scale , and user-scalable . These properties affect the initial scale and width, as well as limiting changes in zoom level.

Not all mobile browsers handle orientation changes in the same way. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

Suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86. The result is horizontal scroll is suppressed in any orientation and the user can zoom in if they want to.

Common viewport sizes for mobile and tablet devices

If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of . This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.

Specifications

Specification Status Comment
CSS Device Adaptation
The definition of "" in that specification.
Working Draft Non-normatively describes the Viewport META element

There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to keep up to date with any changes.

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

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

Создадим простую страничку с минимальной разметкой:

Hello world!

Hello world!

Теперь откроем эту страничку на мобильном устройстве. Открыв, увидим, что наша страница отобразится примерно таким образом:

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

Почему же так происходит?

Проблема мобильных браузеров

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

Если подумать логически, то в этом есть смысл: мобильный браузер видит страницу и предполагает, что она создана для десктопной версии браузера, что верно для подавляющего числа сайтов. Исходя из этого, этот браузер задает странице ширину 980px (Safari iPhone) и пытается оптимально уместить ее на экране смартфона, отобразив в максимально уменьшенном масштабе. Обычно ширина сайтов примерно такой и является, поэтому открыв среднестатистическую веб-страницу на мобильном устройстве, она растянется на всю свою ширину, но меньше в 2-3 раза своего оригинального размера.

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

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

Добавим в блок следующую строку:

И вот что получится в результате:

Совсем другое дело. Задав мета-тегу viewport значение “device-width” , мы говорим браузеру, что ширина области просмотра равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по-умолчанию. На большом количестве смартфонов ширина экрана равняется 320px (в портретном режиме). Можно задать самостоятельно ширину в 320px, что даст тот же результат, но на некоторых смартфонах ширина экрана может быть другой, поэтому самый оптимальный вариант — использовать device-width.

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

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

Также, часто можно встретить такой вариант:

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

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

Подробнее об этих и других специфических мобильных тегах можно почитать .

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

Атрибут Возможное значение Описание
width
(от 200px — 10,000px)
или константа device-width.
Определяет ширину viewport.
Если ширине не указана, в мобильном Safari устанавливается значение 980px, в Opera - 850px, в Android WebKit - 800px, а в IE - 974px.
height Целое неотрицательное значение
(от 223px до 10,000px)
или константа deviceheight
Определяет высоту viewport. В большинстве случаев на этот атрибут можно не обращать внимание
initial-scale
Значение 1.0 - не масштабировать
Определяет начальный масштаб страницы. Чем больше число, тем выше масштаб.
user-scalable no или yes Определяет, может ли пользователь изменять масштаб в окне.
По-умолчанию “yes” в мобильном Safari.
minimum-scale Число с точкой (от 0.1 до 10).
1.0 - не масштабировать
Определяет минимальный масштаб viewport. По-умолчанию “0.25” в мобильном Safari.
maximum-scale Число с точкой (от 0.1 до 10).
1.0 - не масштабировать
Определяет максимальный масштаб viewport. По-умолчанию “1.6” в мобильном Safari.

Таблица совместимости с viewport.

Два вьюпорта

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

Очень неплохо концепцию вьюпортов объясняет Джордж Камминс (George Cummins) на Stack Overflow :

Представьте вьюпорт страницы как большое изображение с неизменными размерами и формой. Теперь представьте меньшую по размеру рамку, через которую вы смотрите на это большое изображение. Эта рамка окружена непроницаемым материалом, который не дает вам увидеть большое изображение полностью, за исключением отдельных его частей. Часть большого изображения, которая видна через рамку, и будет визуальным вьюпортом. Если отойти с рамкой от большого изображения (zoom out, т.е. уменьшить масштаб), то можно увидеть сразу все изображение, или же подойти поближе (zoom in, увеличить масштаб), тогда можно будет рассмотреть только часть изображения. Также, можно поворачивая рамку менять ее ориентацию (на портретную или ландшафтную), при этом размер и форма большого изображения (вьюпорта страницы) всегда остается неизменной.

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

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

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

Какой же ширины сам визуальный вьюпорт? Это зависит от браузера. Safari iPhone использует 980px, Opera - 850px, Android WebKit - 800px, а IE - 974px.

Некоторые браузеры ведут себя по-своему:

Symbian WebKit пытается приравнять вьюпорт страницы к визуальному вьюпорту, и это означает, что элементы с процентной шириной могут вести себя непредсказуемо. Однако, если страница не умещается в визуальном вьюпорте из-за абсолютных величин браузер растягивает вьюпорт страницы максимум до 850-ти пикселей.

Samsung WebKit делает вьюпорт страницы равным по ширине самого широкого элемента.

На BlackBerry при масштабе в 100% вьюпорт страницы равен будет визуальному вьюпорту при любых раскладах.

Масштабирование (Zooming)

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

Понимание вьюпорта страницы

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

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

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

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

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

Android и target-densitydpi

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

На устройствах с HDPI (240dpi) не будет масштабирования.

Такая запись означает, что не будет масштабирования ни на каком из устройств на Андроиде.


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

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

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

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

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

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

Пример


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

< meta name = "viewport" content = "width=1024" >

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

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

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

< meta name = "viewport" content = "width=720" >

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

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