Добрый день, а точнее уже ночь, дорогие друзья. Буквально несколько минут назад я занимался внесением некоторых плавок в шаблон. Шаблон был неадаптивный и проблема была в его структуре, он скрывал часть контента (необходимость в этом была), а при заходе с мобильного браузера (с телефона или планшета), обрезался как контент, так и кусок страницы. Пробовал исправить это недоразумение, и в ходе "полевых испытаний на практике" я понял, что лучшее решение - это использование мета тега 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 альтернативы так скажем... Всем спасибо, удачи!
Последнее обновление: 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 и ширина одинаковы.
Мы также можем использовать другие параметры, например, запретить пользователю масштабировать размеры страницы:
Так уж сложилось, что мобильные браузеры появились сравнительно недавно, а сайтов в сети к тому времени уже было огромное количество. Естественно, все эти сайты совсем не были оптимизированы под маленькие экраны смартфонов, а смартфоны в свою очередь, вынуждены были полагать, что все сайты в ширину занимают где-то около 1000px (980px в сафари). Нужно было как-то решать сложившуюся ситуацию и в apple придумали метатег , который по традиции потом сперли все остальные производители браузеров.
Давайте рассмотрим типично-эпичную верстку сайта:
html
Hello world
Откроем его в мобильном браузере. Вот что мы увидим:
Как вы правильно заметили, текст слишком мелкий и произошло это потому, что сафари попытался вместить наш сайт (который по его предположению сделан для браузеров с шириной экрана около 980pх)
Давайте теперь сообщим браузеру, что наш сайт адаптирован для любой ширины экрана.
html
Что получилось:
Ну вот, теперь все намного лучше. Обозначив width=device-width , мы сказали браузеру, что нам нужна область просмотра контента, равная ширине экрана мобильного устройства.
Можно вручную задать значение для width. Например content="width=320px" , но этого не рекомендуется делать, потому-что различные смартфоны могут иметь абсолютно различную ширину экрана.
Очень распространенным вариантом является:
html
такой вариант задает ширину страницы и начальный масштаб (в данном случае без масштабирования)
Также часто используется следующий вариант:
html
Такие значения используют в случае, если сайт будет использоваться и функционировать как мобильное приложение. Т.е
- при загрузке страницы она не будет смасштабирована
- страница займет всю ширину мобильного браузера
- запрещено любое пользовательское масштабирование
- доступен только горизонтальный и вертикальный скролл
Используйте эту конфигурцию, только в том случае, если знаете, что делаете.
Давайте разберем допустимые параметры и их значения, доступные в мета теге viewport
width
Целое число (от 200px - 10,000px) или “device-width”.
Задает ширину viewport. Если нирина viewport не указана, то:
- для мобильного Safari это 980px
- Opera - 850px
- Android WebKit - 800px
- IE - 974px
height
Целое число (от 223px до 10,000px) или “device-height”
задает высоту viewport. 99% случаев, просто не обращайте внимания на этот параметр, но если сильно надо – пробуйте и экспериментируйте. Удачи..
initial-scale
1.0 - не масштабировать. Задает масштаб страницы. Увеличиваем значение – увеличиваем масштаб.
user-scalable
Доступные значения no или yes
Задает возможнось изменения масштаба страницы. По-умолчанию установлено как yes в Safari.
minimum-scale и maximum-scale
Доступные значения (от 0.1 до 10).
1.0 - не масштабировать. Определяет минимальный и максимальный масштаб viewport соответственно.
По-умолчанию в мобильном Safari minimum-scale = "0.25" , maximum-scale = “1.6”.
Совет: Не используйте мета-теги (в том числе и этот), пока не разобрались, зачем все это нужно. И тестируйте все в различных мобильных браузерах. Удачи!
Привет всем и сегодня мы поговорим о том, что такое 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.