Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Viewport CSS: Адаптивность

Первое, с чем необходимо познакомиться при создании адаптивной вёрстки, — мета-тег viewport. Созданный в компании Apple, он стал стандартом при создании вёрстки.

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

На картинке ниже viewport обозначен красной границей.

Граница viewport

До появления смартфонов viewport был примерно одинаковым от монитора к монитору, поэтому создатели веб-страниц не сильно беспокоились о том, как их страница будет выглядеть на другом мониторе. С приходом мобильных устройств всё стало сложнее — появилось множество устройств с самыми разнообразными областями просмотра. Из-за этого почти все сайты, которые были созданы ранее, плохо отображались на мобильных устройствах. Зачастую появлялась горизонтальная прокрутка, которая мешала просмотру сайта. Думаю, вы тоже сталкивались с такими сайтами.

Горизонтальный скролл

Мета-тег viewport позволяет нам указать, какая область просмотра необходима для страницы. Чаще всего его используют для указания ширины области просмотра, так как вертикальный скролл является естественным при работе с веб-страницами. Ширина устанавливается через атрибут width:

<meta name="viewport" content="width=700">

После установки такого мета-тега, ширина области просмотра нашего сайта станет 700 пикселей.

Чтобы увидеть, как это работает, возьмём эмуляцию экрана iPhone 5. Стандартный браузер Safari по умолчанию имеет viewport равный 980 пикселей. Добавим блок шириной 700 пикселей. Обратите внимание, что сейчас в HTML не указан мета-тег viewport.

Viewport 980 пикселей

Если вся ширина нашего сайта равна 700 пикселей, то такой зазор между блоком и краем экрана нас не будет устраивать. Теперь добавим мета-тег viewport, указав ширину 700 пикселей.

Viewport 700 пикселей

После установки ширины области просмотра в 700 пикселей, наш блок полностью охватывает экран устройства.

Помимо указания ширины в пикселях, есть специальное значение device-width, которое установит ширину области равной разрешению экрана устройства, с которого открыта страница.

Другим примером может служить текст. Возьмём эмуляцию iPhone5, который имеет разрешение 320 пикселей в ширину при стандартном viewport в браузере равным 980 пикселей. Напишем любой текст с размером шрифта 20 пикселей. Это достаточно большое значение, чтобы такой текст было комфортно прочитать с экрана мобильного устройства. Но что же мы получим?

Текст размером 20 пикселей на iPhone5

Если вы смогли разобрать текст, то у вас очень хорошее зрение :) Но на самом деле это не тот результат, который мы ожидали. Связано это с тем, что наш viewport сильно больше, чем реальное разрешение.

Скорректируем viewport, использовав значение device-width:

Текст размером 20 пикселей на iPhone5 с мета-тегом Viewport

Таким образом мы можем сами управлять шириной области просмотра, не отталкиваясь от стандартных значений мобильных браузеров. Помимо свойства width, у мета-тега viewport существует ещё несколько атрибутов.

Масштабирование

initial-scale — указывает коэффициент масштабирования страницы. В качестве значения используется число от 0.1 до 10

initial-scale=1.0

initial-scale=1.0

initial-scale=2.0

initial-scale=2.0

Зачастую используется значение 1.0, чтобы браузер по умолчанию выводил наш макет в оригинальном масштабе, а не пытался его подстроить под область просмотра. Хоть это и кажется хорошей идеей, но любые изменения макета должны контролироваться разработчиком.

minimum-scale и maximum-scale устанавливают минимальный и максимальный коэффициент масштабирования страницы.

user-scalable даёт возможность пользователю масштабировать страницу. В смартфонах чаще всего это делается жестом двумя пальцами. Атрибут имеет всего два возможных значения: yes и no.

Распространённое значение мета-тега viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Дополнительные материалы

Дополнительное задание

Создайте у себя на компьютере страницу, в которой будет один блок с текстом. Попробуйте различные параметры viewport. Обязательно ставьте разную ширину блоку с текстом и следите за его поведением.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»