Мета тег viewport

meta viewport. Как он работает?

Статья, в которой познакомимся с метатегом viewport. Рассмотрим, какие значения может принимать атрибут content данного метатега, а также как его настроить для адаптивного и фиксированного сайта.

Что такое viewport?

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

Viewport (дисплей компьютера)Viewport (экран смартфона)

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4″ до 6″. А самую большую — мониторы компьютеров, размеры диагоналей которых могут превышать 24″.

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

Обратите внимание

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

Выходом из этой ситуации послужило появление адаптивной разметки. Адаптивная — это такая разметка, которую можно настроить под различные размеры экранов.

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

Но и у адаптивной разметки появились проблемы после того как появились смартфоны с высокой плотностью пикселей и, следовательно с высоким разрешением. Чтобы более детально разобраться в этой ситуации рассмотрим следующий пример, в котором сравним 2 устройства.

Физическое разрешение смартфонов iPhone3 и iPhone4

Первое устройство — это смартфон Apple iPhone 3 (диагональ 3.5″). Данный телефон не имеет высокую плотность пикселей. У данной модели она составляет 163ppi (меньше 200ppi).

Физическое разрешение данного смартфона составляет 320×480. Такое разрешение соответствует диагонали, если его сопоставить с разрешением мониторов настольных устройств (компьютеров). Т.е.

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

Второе устройство — это смартфон Apple iPhone 4. Он имеет диагональ такую же как у смартфона Apple iPhone 3, т.е. 3.5″. Но отличается от него тем, что имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение — 640×960 при тех же размерах экрана.

Важно

Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 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 с физическим разрешением 640×960 имеет CSS разрешение 320×480.

Совет

Это означает то, что сайт с метатегом viewport (width=device-width) на этом устройстве будет выглядить так как будто бы это устройство имеет разрешение 320×480 (в данном случае вместо device-width будет подставляться значение 320px). Т.е. на один CSS пиксель будет приходиться 4 физических пикселя (2 по горизонтали и 2 по вертикали).

CSS разрешение смартфона iPhone4

Как же определить какое CSS разрешение будет иметь тот или иной экран устройства?

Определяется оно в зависимости от того какую экран имеет плотность пикселей. Если экран имеет плотность меньше 200ppi, то CSS-разрешение будет равно физическому. Если экран имеет плотность пикселей от 200 до 300 (ppi), то CSS-разрешение будет в 1.

5 раза меньше физического. А если экран имеет плотность более 300ppi, то CSS разрешение будет определяться делением физического разрешения на некоторый коэффициент. Данный коэффициент определяется по формуле плотность/150ppi с округлением обычно до 2, 2.5, 3, 3.

5, 4 и т.д.

Плотность пикселей экранаCSS коэффициент
меньше 200ppi 1
200 — 300 ppi 1.5
больше 300ppi плотность/150 (с округлением до 2, 2.5, 3, 3.5, 4 и т.д.)

Рассмотрим несколько примеров:

  • Apple iPhone 3: физическое разрешение 320×480, плотность пикселей — 163ppi. Плотность пикселей меньше 200, следовательно, CSS коэффициент равен 1. CSS разрешение будет равно физическому, т.е. 320×480.
  • Apple iPhone 6: физическое разрешение 750×1344, плотность пикселей — 326ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 326/150=2 (2.2 округляем до 2). CSS разрешение будет равно 375×667.
  • LG G4: физическое разрешение 1440×2560, плотность пикселей — 538ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 538/150=4 (3.6 округляем до 4). CSS разрешение будет равно 360×640.
  • Galaxy S3 mini: физическое разрешение 480×800, плотность пикселей — 233ppi. Плотность пикселей больше 200, следовательно, CSS коэффициент будет равен 1.5. CSS разрешение будет равно 320×533.
  • Galaxy S5: физическое разрешение 1080×1920, плотность пикселей — 441ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 441/150=3. CSS разрешение будет равно 360×640.

Второй параметр initial-scale — устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.

meta viewport и не адаптивные страницы

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

Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.

Осуществляется это тоже с помощью установления параметру width значения device-width. Т.е. для не адаптивных сайтов в раздел head необходимо добавить следующую строчку:

Масштабирование неадаптивного дизайна под размер устройства (смартфона)

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

Ширина по умолчанию viewport в браузере (если meta viewport не указан)

Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

Дополнительные параметры meta viewport

Кроме основных параметров, тег meta viewport содержит много других.

Вот некоторые из них:

  • minimal-scale — задаёт минимальный масштаб;
  • maximal-scale — устанавливает максимальный масштаб;
  • user-scalable — указывает, может ли пользователь управлять масштабом или нет.

Примеры viewport с использованием дополнительных параметров:

Источник: https://itchief.ru/lessons/html-and-css/meta-viewport-how-it-works

Тег viewport: как настроить область просмотра в адаптивном дизайне

Как настроить область просмотра в адаптивном дизайне с помощью мета-тега “viewport” или CSS правила @viewport и что делать, если анализ не видит “viewport”.

Экран и область просмотра в адаптивном дизайне
Как работает мета-тег viewport
Как и где указывать тег «viewport»

Экран и область просмотра в адаптивном дизайне

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

Для мобильного просмотра веб-мастеры в зависимости от потребностей бизнеса выбирают способ отображения сайта: разрабатывают отдельную мобильную версию, делают адаптивную верстку или динамическую — RESS (Responsive Design + Server Side). Для корректного отображения проекта на разных моделях планшетов и десктопов также нужен адаптив под разные разрешения.

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

  • диагональ экрана — размер дисплея в дюймах, измеряется от угла к углу;
  • размер экрана в точках — количество точек, их устройство использует для координат;
  • полное число пикселей (Rendered Pixels), которое визуализирует устройство. Значение считают с помощью множителя 1x, 2x, 3x, который устройство использует к размеру экрана в точках;
  • физические пиксели — фактическое разрешение экрана в пикселях; в экранах Retina, которые используют современные модели техники Apple, более высокое разрешение изображения на экране с меньшим количеством физических пикселей.

К примеру, возьмем смартфоны: у IPhone 3 с диагональю 3.5″ физическое разрешение экрана 320x480px, а плотность пикселей 163ppi. Разрешение соответствует диагонали, плотность пикселей невысокая.

Читайте также:  Как заработать на форекс

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

Модель IPhone 6 Plus с дисплеем Retina использует более высокое разрешение изображения на экране с меньшим количеством физических пикселей, полноэкранное изображение — 1242x2208px.

Экран IPhone 6 Plus. Источник: kylejlarson.com

Из-за высокой плотности пикселей тот же текст, набранный в размере 16px, будет выглядеть на экране IPhone 6 Plus значительно мельче, чем на дисплее IPhone 3 . Чтобы сделать страницу с таким текстом пригодной для чтения, нужно отмасштабировать ее, увеличив в три раза.

Отношение пикселей зависит от плотности дисплея:

  • плотность менее 200 DPI (точек на дюйм) — соотношение 1.0;
  • от 200 до 300 DPI — 1.5.
  • более 300 DPI — соотношение представляет собой плотность/150 точек на дюйм.

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

Сервер отправляет одинаковый HTML-код на все устройства, но размеры элементов CSS масштабирует под устройства с помощью CSS-правила @viewport и мета-тега «viewport» в HTML. Это позволяет добиться четких изображений и читабельного текста.

Адаптивность есть во всех современных требованиях к PSD-макетам сайта. Пример требований by andrey-hohlov на GitHub.

Как работает мета-тег viewport

Viewport — это видимая пользователю область страницы сайта без прокруток.

Видимая страница сайта на десктопе

Видимая страница сайта на смартфоне

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

Мета-тег «viewport» и CSS правило @viewport

Правило @viewport разработала компания Windows, сейчас оно поддерживается несколькими браузерами, но ожидается, что станет будущим стандартом для веб.

Разработчики контролируют масштаб отображения страницы сайта в окне устройства с помощью мета-тега «viewport» или правила @viewport, которое управляет масштабированием с помощью CSS. Тег используют для адаптивных сайтов и для ресурсов с фиксированной или гибкой разметкой в том числе.

Источник: https://pr-cy.ru/news/p/7298-teg-viewport-kak-nastroit-oblast-prosmotra-v-adaptivnom-dizayne

Viewport мета тег

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 сделает ваш сайт более привлекательным при просмотре на мобильных устройствах.

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

Источник: https://epicblog.net/19-web-development/viewport-meta-tag.html

Тег HTML — мета теги, информация о странице

Основные мета теги

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

Meta-тег description

Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.

Пример использования мета тега description

Meta-тег keywords

Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords.

Пример заполнения мета тега keywords

Meta-тег viewport

Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale — коэффициент масштабирования при первом открытии страницы.

Пример использования мета тега viewport

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

Meta-тег charset

Кодировка веб страницы. Наиболее частое значение: «UTF-8».

Пример использования мета тега кодировки charset

Meta тег refresh

Мета тег с атрибутом http-equiv=»refresh» указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.

Пример использования meta http refresh

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

Тег
Да Да Да Да Да

Атрибуты

АтрибутЗначенияОписание
charset character_set Указывает кодировку HTML документа.
content тестовое значение Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name.
http-equiv content-type default-stylerefresh Устанавливает HTTP заголовок для атрибута content.Сontent-type — Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше).Default-style — Предпочтительная таблица стилей.Refresh — Интервал автообновления страницы.
name application-name author description generator keywordsviewport Имя мета тега. Как и http-equiv определяет суть мета тега.Application-name — имя веб приложения, которое представляет страница.Author — имя автора веб страницы.Description — краткое описание страницы.Generator — Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц).Keywords — ключевые слова страницы.Viewport — некоторые параметры области просмотра страницы.

by Lebedev

Источник: https://guruweba.com/html/teg-meta-html-tegi-informatsiya-o-stranitse/

Что такое Viewport, как он работает и для чего вообще нужен 13.03.2012

Hello world!

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

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

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

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

При сравнении мобильных и десктопных браузеров наиболее очевидное различие — размер экрана.

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

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

Обратите внимание
Совет

Исходя из этого, этот браузер задает странице ширину 980px (Safari iPhone) и пытается оптимально уместить ее на экране смартфона, отобразив в максимально уменьшенном масштабе.

[/su_box]

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

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

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

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

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

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

На большом количестве смартфонов ширина экрана равняется 320px (в портретном режиме).

Можно задать самостоятельно ширину в 320px, что даст тот же результат, но на некоторых смартфонах ширина экрана может быть другой, поэтому самый оптимальный вариант — использовать device-width.

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

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

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

Важно
Обратите внимание

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

[/su_box]

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

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

Читайте также:  Что такое инстаграм

Мета-тег 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 Число с точкой (от 0.1 до 10).Значение 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

Браузер/ ПлатформаИспользование

Собственно, если у вас нет планов углубляться в нюансы и специфику тега viewport, то на этом можно и закончить. Однако, если кто хочет понять принцип работы вьюпорта, и чем отличаются визуальный вьюпорт и вьюпорт страницы, можно почитать дальше.
А поможет нам в этом дополненный мною перевод замечательной статьи Питера-Пауля Коха (Peter-Paul Koch) A tale of two viewports — part two

Источник: http://frontender.com.ua/mobile-web/wtf-viewport/

Тег Viewport — что это такое? » Блог. ArtKiev Design Studio

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

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

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

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

Если изменить ориентацию экрана смартфона, визуальный viewport изменится, но в то же время мобильный браузер приспособится к новой ориентации, немного увеличив масштаб таким образом, что viewport страницы снова станет таким же по ширине, как и визуальный 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 Число с точкой (от 0.1 до 10).Значение 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.

Источник: https://artkiev.com/blog/meta-tag-viewport.htm

Что такое Viewport, как он работает и для чего вообще нужен

Hello world!

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

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

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

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

При сравнении мобильных и десктопных браузеров наиболее очевидное различие — размер экрана.

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

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

Обратите внимание
Совет

Исходя из этого, этот браузер задает странице ширину 980px (Safari iPhone) и пытается оптимально уместить ее на экране смартфона, отобразив в максимально уменьшенном масштабе.

[/su_box]

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

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

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

Добавим в блок HEAD следующую строку:<\p>

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

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

На большом количестве смартфонов ширина экрана равняется 320px (в портретном режиме).

Можно задать самостоятельно ширину в 320px, что даст тот же результат, но на некоторых смартфонах ширина экрана может быть другой, поэтому самый оптимальный вариант — использовать device-width.

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

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

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

Важно
Обратите внимание

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

[/su_box]

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

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

Мета-тег 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 Число с точкой (от 0.1 до 10).Значение 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.

Источник: https://w1c.ru/html_css-9.html

CSS адаптация устройства через @viewport

Когда мы хотим настроить окно браузера на нашем устройстве, мы, как правило, используем HTML тег . Однако, как ни странно, мета-тег не является «нормативным» — его нет в официальном стандарте W3C.

Мета-тег viewport был впервые внедрён компанией Apple в iPhone, а затем и другими поставщиками браузеров. Сегодня он широко используется благодаря популярности iOS, Android и других платформ для планшетов и смартфонов.

Так как мета-тег viewport предназначен исключительно для настройки разметки, можно сказать, что он по праву относится к CSS. Именно поэтому W3C стремится стандартизировать новый метод адаптации, при котором управление окном переносится из HTML в CSS.

Читайте также:  Мифы о получении денег в интернете

CSS правило @viewport

С новым правилом @viewport мы имеем то же самое управление окном, что и с мета-тегом, за исключением того, что такое управление осуществляется исключительно через CSS. Также как и при использовании мета-тега, рекомендуется устанавливать ширину окна браузера, используя не зависимую от устройства device-width:

@viewport {   width: device-width; }

На сегодняшний день @viewport используется программистами для “snap mode” в IE10 – функция Windows 8, позволяющая работать в мультиоконном режиме.

Как ни странно, IE10 игнорирует мета-тег, если размер окна менее 400 пикселей, что приводит к невозможности оптимизации сайтов, использующих этот мета-тег, к таким маленьким окнам.

Чтобы это исправить, программисты должны использовать упомянутый выше параметр device-width, или определить правило @viewport  в медиа-запросе.

Использование @viewport в медиа-запросах

Мы можем использовать @viewport в медиа-запросах. Например, следующий медиа-запрос используется для настройки разметки окна шириной менее 400 пикселей (например, мультиоконный режим в IE10) на ширину 320 пикселей.

@media screen and (max-width: 400px)   @-ms-viewport { width: 320px; }   … }

В данном примере, если устройство настроено на диапазон разрешения от 640 до 1024 пикселей, правило @viewport масштабирует окно до 640 пикселей.

@media screen and (min-width: 640px) and (max-width: 1024px) { @viewport { width: 640px; } … }

Новые дескрипторы @viewport

Несмотря на то, что мы можем управлять функцией увеличения и масштабирования, некоторые свойства viewport  – или как их сейчас называют «дескрипторы» — всё же изменились.

zoom

Дескриптор zoom  – это эквивалент initial-scale в мета-теге. Также как и minimum-scale и maximum-scale, существуют дескрипторы для max-zoom и min-zoom:

@viewport {   width: device-width;   zoom: 2; }

user-zoom

Дескриптор user-zoom  эквивалентен параметра user-scalable

@viewport {   width: device-width;   user-zoom: fixed; }

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

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

Пока что к правилу @viewport  необходимо добавлять вендорный префикс:

@-ms-viewport {   width: device-width; } @-o-viewport {   width: device-width; } @viewport {   width: device-width; }

Конечно же, нам до сих пор необходимо включать мета-тег viewport в html страницу, т.к. в ближайшее время он никуда не денется. Но уже не так страшно смотреть в будущее – добавление правила @viewport всего лишь делает наши сайты и приложения future-friendly.

Оригинал: http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport

Источник: http://www.webmolot.com/viewport/

Использование мета тега viewport в неадаптивных шаблонах

Нет сомнения, что вы используете мета тег viewport при работе с адаптивными шаблонами.

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

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

Code

200?'200px':''+(this.scrollHeight+5)+'px');>

Использование мета тега viewport в неадаптивном шаблоне

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

Пример

Посмотрите на сайт Themify с мобильного устройства.

Важно

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

Code

200?'200px':''+(this.scrollHeight+5)+'px');>

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

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

В таком случае внешний вид будет как ниже приведенном слева снимке экрана — широкая белая полоса слева.Проблему легко устранить установив ширину окна просмотра 720px.

Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 720px.

Общая ошибка

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования.

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

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

Code

200?'200px':''+(this.scrollHeight+5)+'px');>

Источник: http://get-element.3dn.ru/load/vjorstka/ispolzovanie_meta_tega_viewport_v_neadaptivnykh_shablonakh/13-1-0-335

Viewport HTML: сделать ваш сайт мобильным

В этой статье я поговорю о том как и для чего нужно использовать html meta тег — viewport. Приведу несколько примеров и дам краткон описание.

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

Статья от Google

Оригинал статьи можно найти по этой ссылке.

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

В целом, в ней говориться только об одном важном элементе — это HTML тэг meta viewport (снипет, которые указан ниже).

Что делает viewport? Этот снипет дает инструкцию мобильным устройствам покорректному отображению сайта.

Поделитально о свойстве выше:

  • используя width=device-width, вы говорите браузеру о том, что нужно вместить весь сайт в ширину пользовательского устройства.
  • некоторые из платформ, например iOS или Windows Phone все равно оставят ваш сайт выглядеть как на компьютере (как из под заголовка «Пример» — первый скриншот) — тогда нужно прописать вот так width=device-width, initial-scale=1. Это свойство говорит браузеру о том, что нужно 1 в 1 отобразить CSS пиксели относительно устройства пользователя.

Пример

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

Почему? Скорее всего ширину вашего сайта больше ширину экрана телефона и поэтому весь ваш сайта, старается вместиться в ширину девайса.

Совет

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

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

Установка определенной ширины экрана

Если вы хотите установить ширину для определенного устройства, например iPhone 5 с шириной крана (в вертикальном состоянии) 320px, то вы можете делать это следующим образом:

В этом примере ширина экрана будет фиксированная. Будьте аккуратный с этим свойством, так как данное свойство может отображаться по разному на разных девайсах.

Если вы исползуете фиксированную ширину, то это подразумевает использование нескольких meta viewport сразу (под несколько целевых устройств, например iPhone 4, 5, 6 и тд.).

Как узнать точные размеры устройств?

Узнать точные размеры мобильный устройств и планшетов можно на этом сайте.

Слева в самой первой колонке написано имя девайся, во второй на какой платформе это платформа, далее версия, после чего ширина экрана в портретной версии (вертикальной), далее в landscape (горизонтальной) и в конце дата выпуска.

Послесловие

Понравилась запись? Поделись.

А вы пользуетесь viewport для своего сайта?

На этом все. Если у вас есть какие-либо вопросы — пожалуйста пишите их ниже к этой записи.

Источник: http://Bologer.ru/css-viewport-sdelat-vash-sajt-mobilnym/

Почему viewport — метатег?

Адам Брэдли спросил:

Маркос Касерес ответил:

HTML никогда не требовал наличия элементов , и (только валидатор XHTML требовал этого). Так что если открыть тест 1 в любом браузере и просмотреть исходник, вы увидите, что этих трех элементов там нет. Но если изучить DOM в любом соотв. инспекторе, вы увидите, что браузер вставил эти элементы.

Откуда браузер знает, где закрыть и открыть ? Тест 2 показывает страницу, на которой есть элемент . Он еще не является официальной частью HTML (Хикси, поторопись!).

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

По-простому, первый элемент, который не известен как возможная часть , заставляет браузер закрыть и открыть . Так что если он не распознан как элемент типа «метаданные» (, , , , , , , ), он оказывается в . Любой нижеследующий «головной» элемент остается в ; эти элементы не возвращаются в (см. DOM теста 3), даже если вы явно обернете их в элементы , и в исходнике — см. тест 4.

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

В конце концов, HTML относится к контенту, а информация об области просмотра относится к оформлению, и поэтому логичнее было бы объявлять ее в CSS.

Я не знаю на него ответа, кроме того, что Эпл обо всём знает лучше.

Существует CSS-спецификация под названием «CSS Адаптация к устройствам», которая по сути представляет собой « в CSS», с правилом @viewport (см. руководство Андреаса Бовенса). Это обобщает директиву viewport, и к тому же дает больше возможностей: поскольку оно в CSS, его можно комбинировать с медиавыражениями. Оно поддерживается в Опере, Хроме и IE.

Оригинал статьи и автор

Источник: https://css-live.ru/html5/pochemu-viewport-metateg.html

Ссылка на основную публикацию