Отсутствие тега viewport. Использование мета тега 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 всего лишь делает наши сайты и приложения готовыми к переменам
Общая ошибка
Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай - сочетание user-scalable=no или maximum-scale=1 с initial-scale=1. Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!
Я уверен, что многие используют мета-тег 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 . Это будет отключать возможность масштабирования. Пользователи не имеют возможности уменьшить размер страницы, чтобы увидеть ее.
Последнее обновление: 03.05.2016
Прежде всего рассмотрим один из ключевых моментов применения адаптивного дизайна - метатег viewport (по сути с этого тега и начивается адаптиный дизайн). Пусть для начала у нас есть следующая веб-страница:
Обычная веб-страница
Это стандартная веб-страница, которая в обычном браузере будет выглядеть следующим образом:
Однако если мы запустим ту же самую веб-страницу в эмуляторе мобильного устройства или на реальном мобильном устройстве, то мы с трудом сможем прочитать, что же на ней написано:
Применяя масштабирование, пользователь может наконец-то увидеть, что же там все таки написано. Однако это не очень удобно. При этом веб-страница имеет много пустого места, что не очень красиво.
Почему так происходит? Дело в том, что каждый мобильный браузер задает странице некоторые начальные размеры и потом пытается приспособить под размеры экрана текущего мобильного устройства.
Вся видимая область на экране браузера описывается понятием Viewport . По сути viewport представляет область, в которую веб-браузер пытается "впихнуть" веб-страницу. Например, браузер Safari на iPone и iPod определяет ширину viewport по умолчанию равной 980 пикселям. То есть, получив страницу и вписав в viewport с шириной 980 пикселей, браузер сжимает ее до размеров мобильного устройства. Например, если ширина экрана смартфона составляет 320 пикселей, то до этого размера потом будет сжата страница. И ко всем элементам страницы будет применен коэффициент масштабирования, равный 320/980.
Почему в данном случае используется именно 980 пикселей, а, скажем, не реальный размер экрана? Все дело в том, что по умолчанию браузер считает, что каждая веб-страница предназначена для десктопов. А обычной шириной десктопного сайта можно считать 980 пикселей.
При этом для каждого браузера устанавливается своя ширина области viewport, необязательно 980 пикселей. Другие браузеры могут поддерживать в качестве начальной ширины другие значения. Но они также будут выполнять масштабирование.
Чтобы избежать подобной не очень приятной картины, следует использовать метатег viewport. Он имеет следующее определение:
В атрибуте content мета-тега мы можем определить следующие параметры:
Параметр | Значения | Описание |
Принимает целочисленное значение в пикселях или значение device-width | Устанавливает ширину области viewport |
|
Принимает целочисленное значение в пикселях или значение device-height | Устанавливает высоту области viewport |
|
Задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования |
||
Указывает, может ли пользователь с помощью жестов масштабировать страницу |
||
Число с плавающей точкой от 0.1 и выше | Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования |
|
Число с плавающей точкой от 0.1 и выше | Задает максимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования |
Теперь изменим предыдущий пример веб-страницу, использовав метатег:
Обычная веб-страница
Веб-страничка определенно выглядит лучше благодаря использованию метатега viewport. Используя параметр width=device-width мы говорим веб-браузеру, что в качестве начальной ширины области viewport надо считать не 980 пикселей или какое-то другое число, а непосредственную ширину экрана устройства. Поэтому затем веб-браузер не будет проводить никакого масштабирования, так как у нас ширина viewport и ширина одинаковы.
Мы также можем использовать другие параметры, например, запретить пользователю масштабировать размеры страницы:
Полное описание метатега viewport и его атрибутов. Примеры, примечания и рекомендации по адаптации сайта под мобильные устройства. А также дополнительные и полезные метатеги: 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-тегов для сайтов с адаптивным дизайном, заточенным под мобильные устройства:
Мета тег HTML определяет информацию о веб странице. Теги группы meta называют мета тегами, а содержимое мета тега - метаданными. Метаданные указывают различную техническую информацию о документе, в основном для браузеров и поисковых систем и не видны пользователю на сайте.
Часто используются meta-теги: author , description , keywords , viewport , charset .
Мета теги находятся в области
HTML документа (). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description , viewport , charset . Это будет плюсом для внутренней оптимизации сайта.
Синтаксис
Примеры использования в HTML коде
Основные мета теги
Ниже приведены несколько основных тегов с комментариями по применению и примерами использования.
Meta-тег description
Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.
Пример использования мета тега description
Meta-тег keywords
Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords .
Пример заполнения мета тега keywords
Meta-тег viewport
Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale - коэффициент масштабирования при первом открытии страницы.
Пример использования мета тега viewport
Мета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства:
Meta-тег charset
Кодировка веб страницы. Наиболее частое значение: "UTF-8".
Пример использования мета тега кодировки charset
Meta тег refresh
Мета тег с атрибутом указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.
Пример использования meta http refresh
Поддержка браузерами
| Тег | |||||
| Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значения | Описание |
|---|---|---|
| charset |
character_set |
Указывает кодировку HTML документа. |
| content |
тестовое значение |
Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name . |
| http-equiv |
content-type |
Устанавливает HTTP заголовок для атрибута content . Сontent-type
- Кодировка. Устаревшее значение, в HTML5 используйте charset
(см. пример выше). |
| name |
application-name |
Имя мета тега. Как и http-equiv определяет суть мета тега. Application-name
- имя веб приложения, которое представляет страница. |
