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

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

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

... ...

Выше было указано только два атрибута width и initial-scale , которые отвечают за ширину и масштаб соответственно. Через запятую можно задать еще и другие параметры. Рассмотрим все возможные атрибуты.

• width - устанавливает ширину области просмотра браузером. Принимает целочисленное значение (от 200 до 10000) в пикселях или device-width . Этот атрибут обязателен для адаптивных версток сайта.
• height - устанавливает высоту области просмотра браузером. Принимает целочисленное значение в пикселях (от 200 до 10000) или значение device-height . Поскольку определяющим фактором является ширина, то высоту указывать не обязательно для адаптивной верстки.
• initial-scale - коэффициент масштабирования. Принимает вещественные значения (от 0.1 до 10.0). Значение "1.0" стоит по умолчанию, что означает каждый физический пиксель соответствует аппаратному пикселю.
• user-scalable - устанавливает можно ли пользователю масштабировать страницу. Принимает два значения: no/yes
• minimum-scale - задает минимальный масштаб. Измеряется в вещественных числах.
• maximum-scale - задает минимальный масштаб. Измеряется в вещественных числах.

Примеры с viewport

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

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

Текст на не адаптированном дизайне сайта слишком мелкий и очень тяжело его читать и воспринимать, нужно постоянно "гладить" экран, увеличивая текст на сайте, а также перемещаться вправо, когда читаешь. Это очень не удобно. Мета тег 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 страницы следует взглянуть на то, что происходит при наименьшем возможном масштабе страницы. Большинство мобильных браузеров по-умолчанию отображают любую страницу в наименьшем масштабе.Дело в том, что размеры viewport страницы браузеров полностью совпадают с экраном при максимально уменьшенном масштабе и поэтому равны визуальному viewport .

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

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

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

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

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

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