Когда мы хотим настроить окно браузера на нашем устройстве, мы, как правило, используем 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 с каждой новостью от Google становиться все более популярным и необходимым для использования на своих сайтах, ведь как ни крути адаптивная верстка необходима большинству сайтов, а особенно коммерческим.
Возьмем первый любой коммерческий сайт по любому запросу, я искал новые Митсубиси и советы по уходу за системой кондиционирования , попал на сайт prokatavtomobilei.ru. С одной стороны обычный коммерческий сайт, у которого основная ниша работы это прокат автомобилей. Но, давайте откроем этот сайт через симулятор, я выбрал случайно Samsung Galaxy S5:
Сказать, что это плохо это ничего не сказать. Впрочем гугл считает так же:
А если учесть тот факт, что более 30% используют мобильные и планшеты для поиска информации, то значительная часть аудитории быстро покинет такой сайт. Думаю вы поняли, что нужно срочно что-то делать и вносить правки в свои сайты. Теперь давайте об этом подробнее, как исправить эту ситуацию?
Как выглядит тег ViewPort?
Самый простой пример:
Пример сайта без тега и с указанием значения в 1024px:
Другой пример, когда дизайн наоборт слишком маленький и оставляет пустое пространство:
Для того чтобы телефон или планшет отобразил сайт на всю ширину, можно задать строку, чтобы устройство само масштабировало сайт до нужных размеров:
Заблуждения о viewport?
Наверное самая большая ошибка считать этот тег идеальным вариантом для создания мобильной версии сайта, хочу сразу вас огорчить, для этого служит другой тег @media запросов.ОЧЕНЬ ОПАСНАЯ ОШИБКА! Так же часто добавляют значение "initial-scale=1" (о значения прочитаете ниже), на сайты не адаптированные под мобильные устройства и в итоге сайт отображаться в масштабе 100% и пользователь его не может увеличить или уменьшить. Еще хуже объединять значения user-scalable=no или maximum-scale=1 с initial-scale=1. Пример такого отображения:
Если ваш сайт не отвечает размерам окна и / или не сбрасывает значения initial-scale отключите масштабирование:
Возможные значения тега viewport:
Привет всем и сегодня мы поговорим о том, что такое viewport и как его использовать.
Для того, чтобы понять, что это такое, вам нужно какое-нибудь мобильное устройство. Теперь давайте создадим простую html страничку такого содержания:
test post
this is a test post
another post
this is pretty cool
New Post
Теперь откроем нашу страницу на мобильном устройстве и что мы увидим? А увидим мы, что текст слишком маленький и читать его сложно. Однако, если мы добавим тег следующего содержания в тег head
То теперь текст выглядит нормально. Вот рисунок. Слева без тега , а справа с ним
Почему же так происходит? Дело в том, что браузер по-умолчанию думает, что сайт сделан для десктопной версии браузера и пытается полностью вместить его в окно вашего смартфона. Задав же тег , мы говорим браузеру телефона, что ширина просмотра равна ширине смартфона. Вот такой простой тег, но он очень помогает при создании мобильной версии сайта.
Также можно задать масштаб. Для этого используется inital-scale
Если вы хотите запретить пользователю изменять масштаб страницы на его смартфоне, то можете прописать следующее:
Но нужно быть аккуратным, т.к. бывает, что текст достаточно трудно прочитать и приходится его увеличивать, но если это будет запрещено, то вы доставите неудобства пользователю.
Поддержка браузерами
Android поддерживает, но до версии 2.2 . начальный масштаб равен 1.0
Symbian, Nokia 40 серии, Motorola, Opera mobile/mini и NetFront не поддерживают
IE поддерживает с 6 версии
BlackBerry поддерживает с версии 4.2.1
Как вы можете видеть, поддержка пока что неполная, но вы уже можете использовать этот тег, т.к. большинство новых смартфонов уже его понимают.
Итак, на этом я заканчиваю эту статью, спасибо за внимание.
→ 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.
Последнее обновление: 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 и ширина одинаковы.
Мы также можем использовать другие параметры, например, запретить пользователю масштабировать размеры страницы: