Всё, что вы хотели знать о meta-теге viewport
Полное описание метатега viewport и его атрибутов. Примеры, примечания и рекомендации по адаптации сайта под мобильные устройства. А также дополнительные и полезные метатеги: HandheldFriendly, MobileOptimized и apple-mobile-web-app-capable.
Метатег viewport
Примечание: метатег viewpost не входит в формальный стандарт и является частью спецификации CSS Device Adaptation (http://goo.gl/FSTGbn). Но пока эта спецификация не завершена и не применяется повсеместно, рекомендуется использовать meta-тег viewport отдельно и в сочетании со стилями @viewport в целях совместимости.
Атрибуты метатега viewport
width – ширина области просмотра.
Значение атрибута является целое неотрицательно число от 200 до 10000 пикселей или константа device-width, которая задаёт ширину страницы в соответствии с размером экрана.
Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.
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 ) – нельзя масштабировать.
minimum-scale – минимальный масштаб области просмотра.
Значением атрибута является число с точкой от 0.1 до 1.0. В мобильном браузере Safari по умолчанию 0.25. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».
maximum-scale – максимальный масштаб области просмотра.
Примечание: избегайте атрибутов 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-тегов для сайтов с адаптивным дизайном, заточенным под мобильные устройства:
На этом у меня всё. Спасибо за внимание. Удачи!
Короткая ссылка: http://goo.gl/T4Q8L0
Константин, очень хороший мануал получился по viewport. Чесно говоря в основном встречаю использование только написание первой строки из рекомендованного вами набора.
25 июля 2015 г., 10:35 Удалить комментарий
2Сергей Нуйкин Да, сейчас всё меньше уделяют внимание кросбраузерности, т.к. старые технологии действительно отходят уже на второй план. К тому же нет простого инструмента, позволяющего проверить, как будет выглядеть то или иное решение на соответствующем устройстве.
Например, в firefox знаю есть возможность просмотреть страницу с размером экрана выбранного устройства, но это не учитывает ряд его индивидуальных особенностей.
25 июля 2015 г., 10:39 Удалить комментарий
Если ваш сайт не оптимизирован под мобильные устройства укажите в качестве значения параметра width минимальную (!) ширину, при котором сайт вмещает на экран целиком + около 30 пикселей для дополнительного захвата под ту же полосу прокрутки.
Например десктопная ширина моего блога составляет 970 пикселей, добавим 30, получим 1000, таким образом:
31 октября 2016 г., 23:10 Удалить комментарий
Тег viewport не указан как исправить
Метатег для масштабирования дизайна 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.
Понятие о viewport
Viewport ─ это часть страницы, доступная посетителю без прокрутки.
На разных гаджетах из-за отличий в разрешении одна и та же страница может отображаться по-разному. Это не всегда удобно для посетителя:
Чтобы страничка адаптировалась к устройству и контент можно было адекватно просматривать, нужно вставить мета-тег viewport HTML-код сайта.
Прописываем мета-тег viewport
Прописать meta viewport для адаптивных страниц
Им пользуются преимущественно для адаптивных шаблонов. Для этого достаточно прописать одну строчку:
Meta viewport на неадаптивных шаблонах
Не рекомендуется использовать initial-scale, так как изображение страницы будет «съезжать»:
Используем код:
Ширина по умолчанию — 980 пикселей (px). Однако шаблон не всегда соответствует ему. Чтобы это исправить, придется вручную подбирать значение ширины.
Какие еще параметры есть в meta viewport
Если нужно разрешить или запретить пользователю увеличивать/уменьшать масштаб страницы или вам нужно, чтобы шаблон подстраивался под ориентацию окна, пользуйтесь дополнительными атрибутами:
Имеют числовые значения от 0.1 до 10. Значение 1.0 не изменяет масштаб:
Имеет значения «yes» и «no» (по умолчанию задано «yes»).
Имеет значения auto (в зависимости от ориентации девайса), landscape (горизонтальная) и portrait (портретная). Auto по умолчанию.
Задается числовое значение от 200 до 10000px, либо устанавливается автоматический подгон под размер экрана с помощью device-height.
Частая ошибка
Некоторые разработчики используют для неадаптивных страниц атрибуты user-scalable=no или initial-scale=1 вместе с maximum-scale=1. Это отключает масштабирование, и посетитель не может увидеть всю страницу.
Пользовались мета-тегом viewport? Пишите отзывы в комментариях!
Маленькая подсказка:не забывайте про мета тег viewport
Я помню свое путешествие по миру адаптивного веб-дизайна; я использовал классические сетки, вставленные в подвижную разметку, использовал медиа запросы в самый первый раз. Растягивание окна браузера привело меня к желаемым результатам. Затем я решил проверить все на мобильных устройствах. И ничего не заработало – я смотрел на скукоженную версию полноэкранного дизайна. Решение проблемы оказалось очень простым..
Примечание: Этот урок был впервые опубликован в феврале 2012, но на него часто ссылаются другие уроки (а вещи с тех пор поменялись) так что я решил его обновить.
Премиум опции
Этот урок научит вас как использовать мета тег viewport самим, но если вам нужна помощь в создании адаптивного сайта, вам могут помочь наши дизайнеры в рамках Envato Studio. Вот наилучшие варианты:
1. Responsive Website Design & Development
Команда из UK создаст уникальный дизайн на основе вашей айдентики, цветов, потребности в функциях и с учетом лучших юзабилити практик. Ваш сайт будет уникальным и нацеленным на максимальную конверсию.
2. Custom & Responsive Website Design
Если с разработкой вы можете справиться сами и просто хотите, чтобы вам разработали дизайн, выбирайте этот вариант. Вот что вы получите:
3. Responsive One-Page Website Design
Этот человек полностью на фрилансе, с 12 годами профессионального опыта в веб-дизайне, графическом дизайне и дизайне UX/UI интрефейсов.
Вы получите стильный адаптивный одностраничник.
Если вам никто не подошел, либо же вы хотите научиться всему сами, читайте дальше.
Если вы ничего не читали в этой статье, то вот это точно стоит: если вы разрабатываете адаптивно, используйте в мета тег viewport. В простом своем применении он подумает о правильной разметке для различных девайсов.
Проблема
Давайте воспользуемся демо страницей. Взгляните; она разрастается и уменьшается вместе со сменой размера окна браузера. Мы задали свойства в медиа запрос, которые делают текст больше и придает тексту цвет #ff333e на более широких экранах. Чудно.
Вот как это выглядит в Chrome на OS X:
А вот как это выглядит, когда мы сжимаем окно браузера:
Теперь взглянем как это выглядит на экране смартфона (в iOS Safari на iPhone 4):
Первое, что бросается в глаза, это красный заголовок; мы ожидали не совсем это. Мы будто смотрим на отдаленную версию нашего сайта.
iOS Safari считает, что ширина страницы равна 960px, и для того чтобы содержимое уместилось на 320px экране iPhone 4, Safari приходится масштабировать содержимое в три раза. Контент таким образом менее читаем, до тех пор, пока вы не приблизите.
Почему?
Вот что происходит, когда мы неговорим точно браузерам, что им необходимо делать. Когда вы посещаете сайт через мобильный браузер, сайт посчитает, что вы смотрите его через десктопную версию и что вы хотите увидеть его целиком, не только верхний левый угол. Затем он установит ширину viewport на (в случае с iOS) 980px, пытаясь втиснуть все содержимое в эти рамки.
Мета тег viewport
Посмотрите на мета тег viewport, созданный Apple, а затем адаптированный и развитый другими людьми.
В поле content=»» вы можете ввести множество значений, разделенных запятой, но мы остановимся на главных.
Например, если ваш мобильный дизайн шире 320px, вы можете задать ширину viewport:
Для адаптивных сеток практичней будет основать ширину вашего viewport на viewport девайса, совместив таким образом предпочитаемую вами разметку с необходимым вам девайсом:
Чтобы быть наверняка уверенным в том, что ваша разметка отобразится нужным образом, вы также можете задать уровень приближения. Например, так:
Это позволит убедиться наверняка, что перед открытием страницы ваш дизайн будет отображен с правильным масштабированием 1:1. Никакое приближение не применится. Вы можете пойти дальше и вообще запретить пользователя приближать страницу:
Примечание: перед применением параметра maximum-scale подумайте, действительно ли вам нужно запрещать пользователю приближать контент на вашей странице. Смогут ли они легкодоступно прочитать все содержимое?
Неправильное использование тега viewport может доставить огромное количество проблем пользователям.
Собираем все вместе
Все эти знания дают нам отличную основу, с которой мы можем начать работать:
Давайте посмотрим, как это повлияет на нашу демо страницу.
Как видите, все остается с правильным масштабированием. Текст правильно пропорционируется и наш визуальный помощник (красный заголовок)) исчез.
Глубокий поклон Джейсону, который указал на это в комментариях. Указав, что ширина вашей разметки равна ширине девайса, у вас возникают проблемы с девайсом в ландшафтном режиме. Взгляните на iPhone 4 на примере нашего демо в ландшафтном режиме.
Сломано.
Браузер чувствует себя обязанным все приблизить, чтобы соответствовать ширине страницы.
Намного лучше.
Не тот стандарт, который вы искали
Мета тег viewport был решением проблемы для Apple. Он был быстро подхвачен другими платформами, но никогда W3C. Microsoft сделала это известным, когда при определенных обстоятельствах в IE10 они отказались считывать этот тег. Вместо этого они использовали Адаптацию под девайсы CSS, на чем настаивала W3С.
Вкратце, это задавание свойств viewport через CSS правило @viewport вместо HTML.
Ну или в соответствие с нашим новым правилом не задавать ширину девайса, мы можем сделать следующее:
IE10 требует префиксов, которые выглядят так:
Это значительно более элегантное решение, но ждать пока это будет поддерживаться всеми браузерами, будет долго. Вставляйте его в ваш CSS, чтобы убедиться, что вас дизайн хорошо себя ведет в IE10, и не упускайте это из виду в дальнейшем. Здесь это очень важно.
Прочитайте больше об этом в посте Тима Кадлека IE10: режим Snap и адаптивный дизайн.
Заключение
Дальнейшее чтение
Готовые решения
Вы можете найти множество выскокачественных адаптивных тем и шаблонов на ThemForest, а также огромное количество сниппетов и плагинов в разделе «responsive» на CodeCanyon.
meta viewport. Как он работает?
Статья, в которой познакомимся с метатегом viewport. Рассмотрим, какие значения может принимать атрибут content данного метатега, а также как его настроить для адаптивного и фиксированного сайта.
Что такое viewport
До появления смартфонов и планшетов, веб-страницы в основном просматривались на экранах компьютерах. Viewport этих экранов хоть и отличался, но не настолько сильно. Для создания сайтов до появления мобильных устройств в основном использовалась фиксированная или резиновая (гибкая) разметка.
Но и у адаптивной разметки появились проблемы после того как появились смартфоны с высокой плотностью пикселей и, следовательно с высоким разрешением. Чтобы более детально разобраться в этой ситуации рассмотрим следующий пример, в котором сравним 2 устройства.
Назначение метатега viewport
Метатег viewport был разработан компанией Apple для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Другими словами meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi). Данный метатег предназначен в большой степени для адаптивных сайтов, но с помощью него можно улучшить представления веб-страниц, имеющих фиксированную или гибкую разметку.
Добавление meta viewport к веб-странице
Метатег viewport, как уже было отмечено выше, в большой степени предназначен для адаптивной разметки. Поэтому начнём рассмотрение именно с неё.
Настройка meta viewport для адаптивных веб-страниц
Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:
Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить. В данном случае эта информация касается viewport.
Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.
Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:
Рассмотрим каждый из них более подробно.
Например, смартфон iPhone4 с физическим разрешением 640×960 имеет CSS разрешение 320×480. Это означает то, что сайт с метатегом viewport ( width=device-width ) на этом устройстве будет выглядить так как будто бы это устройство имеет разрешение 320×480 (в данном случае вместо device-width будет подставляться значение 320px). Т.е. на один CSS пиксель будет приходиться 4 физических пикселя (2 по горизонтали и 2 по вертикали).
Как же определить какое CSS разрешение будет иметь тот или иной экран устройства?
Определяется оно в зависимости от того какую экран имеет плотность пикселей. Если экран имеет плотность меньше 200ppi, то CSS-разрешение будет равно физическому. Если экран имеет плотность пикселей от 200 до 300 (ppi), то CSS-разрешение будет в 1.5 раза меньше физического. А если экран имеет плотность более 300ppi, то CSS разрешение будет определяться делением физического разрешения на некоторый коэффициент. Данный коэффициент определяется по формуле плотность/150ppi с округлением обычно до 2, 2.5, 3, 3.5, 4 и т.д.
Рассмотрим несколько примеров:
meta viewport и не адаптивные страницы
Если сайт не имеет адаптивный дизайн, то его представление на экране смартфона тоже можно улучшить.
Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.
Кроме того, разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.
Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:
Дополнительные параметры meta viewport
Кроме основных параметров, тег meta viewport содержит много других.
Вот некоторые из них:
Примеры viewport с использованием дополнительных параметров: