Нет сомнения, что вы используете мета тег viewport при работе с адаптивными шаблонами. Но знаете ли вы, что мета тег viewport может быть полезен и для неадаптивных шаблонов? Если у вас нет времени для конвертации шаблона своего проекта в адаптивный, то следует прочесть материалы данного урока, чтобы использовать мета тег viewport для улучшения вида вашего дизайна на мобильных устройствах.
Обычное использование мета тега viewport
Обычно мета тег viewport используется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах. Вот пример.
Использование мета тега viewport в неадаптивном шаблоне
По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш дизайн может плохо соответствовать данному диапазону. Значение может быть для шаблона слишком большим или маленьким. Ниже приводится два примера. которые используют мета тег viewport для улучшения внешнего вида неадаптивного шаблона на мобильных устройствах.
Пример
Посмотрите на сайт Themify с мобильного устройства.
Левый снимок экрана демонстрирует внешний вид сайта без использования мета тега viewport . Можно заметить, что страница касается обеих сторон экрана. Если добавить мета тег viewport с указанием ширины 1024px, то будет оставаться зазор слева и справа.
Другой пример
Если ваш дизайн слишком узкий, то он тоже будет выглядеть коряво. Допустим, ширина контейнера 700px и он не адаптируется. В таком случае внешний вид будет как ниже приведенном слева снимке экрана - широкая белая полоса слева.
Проблему легко устранить установив ширину окна просмотра 720px. Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 720px.
Общая ошибка
Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай - сочетание user-scalable=no или maximum-scale=1 с initial-scale=1 . Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!
Довольно часто люди не понимают разницы между шириной (width) и шириной устройства (device-width) (и, более того, есть примеры с минимальной (min-device-width) и максимальной шириной устройства (max-device-width)), используя медиазапросы CSS. Это недопонимание приводит к написанию плохого кода и значительно большему количеству работы для разработчика. Этот вопрос очень часто встречается на форумах SitePoint, поэтому пришло время объяснить все подробнее. В этой статье будет затронута эта проблема, а также мы более подробно рассмотрим, какой вариант следует использовать, создавая отзывчивые сайты.
Основные определения
Давайте определимся, что мы имеем ввиду, когда говорим о медиазапросах, основанных на «ширине» и «ширине устройства». Нижеприведенные цитаты взяты из статьи MDN о медиазапросах, и там есть такое определение «ширины»:
Свойство среды «ширина» (width) описывает ширину отображаемой поверхности устройства вывода (например, ширину окна документа или ширину окна страницы на принтере)
А вот так MDN определяют «ширину устройства»:
Описывает ширину устройства вывода (означая полный экран или страницу, а не только область отображения, такую как окно документа)
Так что же это на самом деле значит? Простыми словами, «ширина» и «ширина устройства» относятся к ширине устройства, а не всей ширине области просмотра, которая может быть абсолютно другим понятием. Все, что вас должно интересовать – это ширина области просмотра, вне зависимости от ширины устройства.
При этом основным различием между шириной и шириной устройства является то, что ширина устройства не всегда соответствует области просмотра определенного устройства.
Большинство планшетов и мобильных устройств не всегда имеют 1 пиксель устройства на 1 пиксель CSS. Например, вам стоит знать, что у iPhone 4 стандартная область обзора экрана составляет 640×960. Это означает, что на данном примере device-width iPhone4 равна 320×480. Дело в том, что Apple понимают, что не каждый сайт создан отзывчивым и пытается сделать хорошо всем, предоставив ширину около 980px для отображения десктопного варианта сайта. Это значит, что если нет метатега области обзора, iPhone4 берет сайт и отображает его, как если бы он был 980px в ширину, при этом втискивая его в экран шириной 320px, в результате чего с точки зрения пользователя сайт будет отображаться уменьшенным.
Начинаем
Для начала, как и во всех случаях превращения сайтов в отзывчивые и использования медиазапросов, тег области обзора meta необходимо поместить в раздел вашего сайта. Базовая стандартная версия приведена ниже.
Как только на нашей странице появится этот сниппет, если мы будем просматривать страницу на разных устройствах, будут срабатывать разные медиазапросы. Без этого, при просмотре страницы на определенном устройстве, она будет отображаться просто как уменьшенная версия страницы; устройство будет пытаться вжать целый сайт в экран шириной 320px. И это не есть хорошо ни для вас, ни для ваших пользователей! Пользователи не любят увеличивать сайт, чтобы увидеть контент, и они точно не хотят скроллить его туда-сюда.
Например, давайте возьмем iPhone 4, у которого стандартная ширина области просмотра 980px. Без тега meta ваши попытки использовать медиазапросы не приведут ни к чему, и устройство будет неправильно обращаться к стандартной области просмотра. Большинство медиазапросов рассчитано на 500px или меньше. Это обычно выполняется с помощью простого медиазапроса max-width. Без тега meta вы не получите эффекта от этого запроса, так как iPhone 4 будет продолжать отображать версию сайта шириной 980px. Давайте рассмотрим приведенный ниже пример:
Body { background: white; } @media screen and (min-width: 980px) /* Desktop */ { body { background: red; } } @media screen and (max-width: 979px) /* Tablet */ { body { background: blue; } } @media screen and (max-width: 500px) /* Mobile */ { body { background: green; } }
Ниже прикреплены два скриншота, сделанные с помощью iPhone 4. На обеих страницах есть вышеуказанный CSS, но на одной используется тег области просмотра meta, а на другой нет.
Показанная выше страница не содержит тега meta, и, в результате, фон отображается красным и имитирует стандартную область просмотра шириной 980px, вместо того, чтобы использовать мобильный медиазапрос на 500px.
В этом случае метатег на месте и iOS корректно отображает страницу такой, какой мы хотим: она основана на ширине 320px и позволяет нашим медиазапросам работать таким образом, как мы ожидаем.
Почему следует выбирать device-width?
Честно говоря, заголовок этой статьи изначально подразумевает неиспользование device-width. Однако для device-width есть свое место. Если вы делаете сайт для определенных устройств, тогда да – вам следует использовать device-width.
С точки зрения CSS и RWD, хороший сайт – это тот, который на самом деле «агностичен к устройству» и не пытается потакать ширине каждого отдельного девайса. Таргетинг на отдельные контрольные точки для различных «типов» устройств (например, планшетов или мобильных телефонов) достигается путем фокусирования на то, как контент отображается на определенной ширине области просмотра, а потом путем внесения соответствующих изменений в медиазапросы. Поэтому не устройство диктует контрольные точки, а макет и контент, и в конечном итоге это может привести к оптимальным результатам, как с вашей точки зрения, так и с точки зрения пользователей.
Это может и быть той причиной, почему у стольких людей проблемы с созданием отзывчивого дизайна, и почему они жалуются, что это сложно. Но если они пытаются создавать дизайн под отдельные устройства, они ввязываются в заведомо проигрышную битву: количество устройств, которые необходимо учитывать (чтобы охватить всё), слишком огромное и просто сводит все к плохому коду. Также стоит упомянуть, что если вы решили использовать device-width, вы также должны задавать отдельные правила для ориентации (книжная или альбомная): ширина устройства не изменяется только из-за того, что вы повернули устройство на бок. Для этого нужно еще больше кода, а это означает еще больше головной боли.
Однако давайте посмотрим на другой возможный вариант
Что насчет “width”?
Я придерживаюсь мнения, как и многие опытные разработчики, что полностью отзывчивая страница, которая ведет себя так, как от нее ожидают, на всех возможных размерах экранов – это самый простой и наиболее выгодный способ получить наиболее эффективный для всех устройств макет.
Чтобы создать полностью отзывчивую и гибкую страницу, разработчик должен просто обеспечить, чтобы учитывались все области просмотра, а страница изменяла структуру и размер при необходимости в соответствии с контентом и дизайном.
Все что вам нужно для полностью отзывчивой страницы – это гибкий сайт и немного продуманных медиазапросов для таргетирования на стандартный ряд мобильных устройств, планшетов, компьютеров + области просмотра. Я предпочитаю использовать Foundation’s Media Queries, которые являются наиболее точными и охватывают все необходимые области просмотра.
Конечно, как и все в разработке, использование только запросов на основе ширины не является решением всех проблем с макетом. Это скорее необходимо для тестирования на мобильных устройствах в поисках различных багов и странностей отображения. Но, имея возможность видеть, как все будет отображаться на различных мобильных устройствах – это так же просто, как изменять размер окна вашего браузера.
Для тестирования я использую расширение для Chrome Responsive Web Design Tester. Оно позволяет выбирать определенное устройство. Вы увидите размер устройства и то, как ваша страница будет отображаться на таком устройстве.
Еще одно небольшое преимущество, которое хотелось бы упомянуть, это что использование запросов на базе ширины гарантирует, что будущие устройства будут отображать сайт полноценно. Это довольно перспективный подход, так как вы ориентируетесь на что-то более глобальное – общий размер области просмотра – а не на определенное устройство.
В заключение
Вы все еще планируете использовать device-width в медиазапросах? Приведенные аргументы оказались недостаточно убедительными? Использование обычной «ширины» и области просмотра устройства упрощает отзывчивый дизайн и в конечном итоге является лучшим вариантом, который следует использовать практически всегда.
Так уж сложилось, что мобильные браузеры появились сравнительно недавно, а сайтов в сети к тому времени уже было огромное количество. Естественно, все эти сайты совсем не были оптимизированы под маленькие экраны смартфонов, а смартфоны в свою очередь, вынуждены были полагать, что все сайты в ширину занимают где-то около 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
Как вы можете видеть, поддержка пока что неполная, но вы уже можете использовать этот тег, т.к. большинство новых смартфонов уже его понимают.
Итак, на этом я заканчиваю эту статью, спасибо за внимание.
Я уверен, что многие используют мета-тег 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 . Это будет отключать возможность масштабирования. Пользователи не имеют возможности уменьшить размер страницы, чтобы увидеть ее.
