Практический online-курс

Как построить соответствующий стандартам адаптивный дизайн с помощью @viewport

Адаптивный дизайн

Одним из ключевых понятий в любом, адаптивном или респонсивном, дизайне является изменение размера окна просмотра (вьюпорта). Все потому, что размеры мобильных вьюпортов сильно варьирируются от настольных компьютеров. Для управления размером окна мы традиционно использовали viewport мета тег.

Первоначально этот мета-тэг был введен в Apple Safari и с тех пор был принят другими браузерами. Но это приводило к несогласованности при кодировании.

К счастью, W3C вновь пришел к нам на помощь, введя @viewport в CSS правила.

Как было раньше

Используя старый мета-тег, мы сообщаем браузеру, какого размера вьюпорт должен рассматриваться:

<meta name='viewport' content='width=device-width'>

Новое CSS правило

Совершенно независимо от того, будучи или нет”валидным”, инструкция вьюпорта не является данными, это презентация. Таким образом, придерживаясь наших данных и принципа разделения презентации, инструкция вьюпорта должна быть в CSS, а не в HTML.

W3C решение в CSS выглядит так:

@viewport {
    width: device-width;
}

или альтернативно, вы можете установить окно просмотра с числом, вот так:

@viewport {
    width: 640px;
}

Вы можете использовать @viewport правило в сочетании с @media запросами, чтобы заставить любое окно больше чем 960px сократится до 960px, вот так:

@media screen and (min-width: 960px){
    @viewport {
        width: 960px;
    }
}

Дополнительные свойства

Правило @viewport, также позволяет увеличить указанную страницу по умолчанию, и даже установить максимальный зум:

@viewport {
    width: 960px;
    zoom: 1;
    max-zoom: 3;
}

Масштабирование можно заблокировать целиком, путем установки user-zoom свойства на fixed (фиксированную). Однако масштабирование, особенно на смартфонах, необходимо для доступности, поэтому лучше не использовать это свойство.

Еще одно очень полезное свойство, которое позволяет зафиксировать нашу веб-страницу в ландшафтном или портретном режиме:

@viewport {
    orientation: landscape;
}

Вот и все основные понятия про viewport. Теперь закрепите свои знания в ваших новых проектах!

Высоких конверсий!

 

11-03-2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".