Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)
Я помню свое путешествие по миру адаптивного веб-дизайна; я использовал классические сетки, вставленные в подвижную разметку, использовал медиа запросы в самый первый раз. Растягивание окна браузера привело меня к желаемым результатам. Затем я решил проверить все на мобильных устройствах. И ничего не заработало – я смотрел на скукоженную версию полноэкранного дизайна. Решение проблемы оказалось очень простым..
Примечание: Этот урок был впервые опубликован в феврале 2012, но на него часто ссылаются другие уроки (а вещи с тех пор поменялись) так что я решил его обновить.
Премиум опции
Этот урок научит вас как использовать мета тег viewport самим, но если вам нужна помощь в создании адаптивного сайта, вам могут помочь наши дизайнеры в рамках Envato Studio. Вот наилучшие варианты:
1. Responsive Website Design & Development
Команда из UK создаст уникальный дизайн на основе вашей айдентики, цветов, потребности в функциях и с учетом лучших юзабилити практик. Ваш сайт будет уникальным и нацеленным на максимальную конверсию.
Вы получите:
- Стильный дизайн
- Полностью редактируемый и масштабируемый PSD файл
- HTML5, CSS3, JavaScript, CMS
- Адаптивный дизайн
2. Custom & Responsive Website Design
Если с разработкой вы можете справиться сами и просто хотите, чтобы вам разработали дизайн, выбирайте этот вариант. Вот что вы получите:
- Дизайн домашней страницы на готовой Bootstrap сетке
- 3 дополнительные страницы (О нас, Контакты, Вопросы и т.д.)
- Подменю и эффекты при наведении мыши на кнопки для ваших разработчиков
- Отлично структурированные слои
3. Responsive One-Page Website Design
Этот человек полностью на фрилансе, с 12 годами профессионального опыта в веб-дизайне, графическом дизайне и дизайне UX/UI интрефейсов.
Вы получите стильный адаптивный одностраничник.
Если вам никто не подошел, либо же вы хотите научиться всему сами, читайте дальше.
Crux
Если вы ничего не читали в этой статье, то вот это точно стоит: если вы разрабатываете адаптивно, используйте в <head> мета тег viewport. В простом своем применении он подумает о правильной разметке для различных девайсов.
1 |
<meta name="viewport" content="initial-scale=1"> |
Проблема
Давайте воспользуемся демо страницей. Взгляните; она разрастается и уменьшается вместе со сменой размера окна браузера. Мы задали свойства в медиа запрос, которые делают текст больше и придает тексту цвет #ff333e на более широких экранах. Чудно.
Вот как это выглядит в Chrome на OS X:
А вот как это выглядит, когда мы сжимаем окно браузера:
Теперь взглянем как это выглядит на экране смартфона (в iOS Safari на iPhone 4):
Первое, что бросается в глаза, это красный заголовок; мы ожидали не совсем это. Мы будто смотрим на отдаленную версию нашего сайта.
iOS Safari считает, что ширина страницы равна 960px, и для того чтобы содержимое уместилось на 320px экране iPhone 4, Safari приходится масштабировать содержимое в три раза. Контент таким образом менее читаем, до тех пор, пока вы не приблизите.
Почему?
Вот что происходит, когда мы неговорим точно браузерам, что им необходимо делать. Когда вы посещаете сайт через мобильный браузер, сайт посчитает, что вы смотрите его через десктопную версию и что вы хотите увидеть его целиком, не только верхний левый угол. Затем он установит ширину viewport на (в случае с iOS) 980px, пытаясь втиснуть все содержимое в эти рамки.
Мета тег viewport
Посмотрите на мета тег viewport, созданный Apple, а затем адаптированный и развитый другими людьми.
Выглядит он так:
1 |
<meta name="viewport" content=""> |
В поле content="" вы можете ввести множество значений, разделенных запятой, но мы остановимся на главных.
Например, если ваш мобильный дизайн шире 320px, вы можете задать ширину viewport:
1 |
<meta name="viewport" content="width=320"> |
Для адаптивных сеток практичней будет основать ширину вашего viewport на viewport девайса, совместив таким образом предпочитаемую вами разметку с необходимым вам девайсом:
1 |
<meta name="viewport" content="width=device-width"> |
Чтобы быть наверняка уверенным в том, что ваша разметка отобразится нужным образом, вы также можете задать уровень приближения. Например, так:
1 |
<meta name="viewport" content="initial-scale=1"> |
Это позволит убедиться наверняка, что перед открытием страницы ваш дизайн будет отображен с правильным масштабированием 1:1. Никакое приближение не применится. Вы можете пойти дальше и вообще запретить пользователя приближать страницу:
1 |
<meta name="viewport" content="maximum-scale=1"> |
Примечание: перед применением параметра maximum-scale подумайте, действительно ли вам нужно запрещать пользователю приближать контент на вашей странице. Смогут ли они легкодоступно прочитать все содержимое?
Неправильное использование тега viewport может доставить огромное количество проблем пользователям.
Собираем все вместе
Все эти знания дают нам отличную основу, с которой мы можем начать работать:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
Давайте посмотрим, как это повлияет на нашу демо страницу.
Как видите, все остается с правильным масштабированием. Текст правильно пропорционируется и наш визуальный помощник (красный заголовок)) исчез.
Но!
Глубокий поклон Джейсону, который указал на это в комментариях. Указав, что ширина вашей разметки равна ширине девайса, у вас возникают проблемы с девайсом в ландшафтном режиме. Взгляните на iPhone 4 на примере нашего демо в ландшафтном режиме.
Браузер чувствует себя обязанным все приблизить, чтобы соответствовать ширине страницы.
Чтобы с этим разобраться мы можем, как указывает Джеймсон, использовать Javascript, чтобы выбрать, с каким свойством наш мета тег будет взаимодейтсвовать, но самым простым решением будет просто проигнорировать width. Установив initial-scale, установится также и ширина. Так и работает наше новое, упрощенное демо в ландшафтном режиме:
Не тот стандарт, который вы искали
Мета тег viewport был решением проблемы для Apple. Он был быстро подхвачен другими платформами, но никогда W3C. Microsoft сделала это известным, когда при определенных обстоятельствах в IE10 они отказались считывать этот тег. Вместо этого они использовали Адаптацию под девайсы CSS, на чем настаивала W3С.
Вкратце, это задавание свойств viewport через CSS правило @viewport вместо HTML.
1 |
@viewport{ |
2 |
zoom: 1.0; |
3 |
width: device-width; |
4 |
}
|
Ну или в соответствие с нашим новым правилом не задавать ширину девайса, мы можем сделать следующее:
1 |
@viewport{ |
2 |
zoom: 1.0; |
3 |
width: extend-to-zoom; |
4 |
}
|
IE10 требует префиксов, которые выглядят так:
1 |
@-ms-viewport{ |
2 |
width: extend-to-zoom; |
3 |
zoom: 1.0; |
4 |
}
|
Это значительно более элегантное решение, но ждать пока это будет поддерживаться всеми браузерами, будет долго. Вставляйте его в ваш CSS, чтобы убедиться, что вас дизайн хорошо себя ведет в IE10, и не упускайте это из виду в дальнейшем. Здесь это очень важно.
Прочитайте больше об этом в посте Тима Кадлека IE10: режим Snap и адаптивный дизайн.
Заключение
Адаптивный веб-дизайн не только для тех, кто любит сужать и расширять окно своего браузера, он скорее о доступности на как можно большем количестве устройств и разрешений! Через мета тег viewport в вашем элементе <head>, плюс через правило @viewport вы можете построить отличные адаптивные сайты.
Дальнейшее чтение
- Apple documentation: Using the Viewport Meta Tag
- Mozilla: Using the viewport meta tag to control layout on mobile browsers
- quirksmode.org A tale of two viewports
- w3.org Mobile Web Application Best Practices: Use Meta Viewport Element To Identify Desired Screen Size
- Quick Tip: Never use maximum-scale=1.0 on the A11y Project
- Tim Kadlec explains IE10 Snap Mode and Responsive Design
- The @viewport rule proposal
Готовые решения
Вы можете найти множество выскокачественных адаптивных тем и шаблонов на ThemForest, а также огромное количество сниппетов и плагинов в разделе "responsive" на CodeCanyon.
