Course Content
Введение в HTML
Цель уроков из этого раздела подготовить вас к началу работы над проектом.
0/5
Введение в CSS
В этом разделе курса ты познакомишься с каскадными таблицами стилей.
Создание сайта: базовый курс 2022
Конспект урока

Что такое viewport

viewport — это окно просмотра в брауезере. Обычно оно имеет прямоугольную форму.

Соответственно не всё содержимое страницы может вместиться во viewport.

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

Прокрутка в окне браузера бывает горизонтальной и вертикальной.

Для удобства работы с прокруткой используются специальные бегунки появляющиеся в окне браузера всякий раз, когда содержимое страницы не вмещается во viewport.

Хорошо адаптированная страница не должна вызывать полосы прокрутки при просмотре.

Есть исключения — табличные данные и прочие блоки, которые не должны перестраиваться согласно стандартам или техническому заданию. Такие элементы при просмотре на малых экранах обычно прокручиваются пальцем и имеют свой скрол, который чаще всего стилизуется под дизайн сайта.

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

Что бы правильно управлять отображением страницы тебе нужно понимать как в зависимости от ширины вьюпорта отображается её содержимое.

Изначально мобильные устройства имели экраны с низким разрешением и весьма компактные разрмеры. Это вынуждало пользователй изменять масштам страниц, что бы прочитать тексты или внимательней рассмотреть картинки.

Затем появились экраны с более высокими разрешениями, например первые айфоны с ретиной и началась путаница с физическим размером экрана устройства и фактическим разрешением, в котором работал дисплей.

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

Назначение метатега viewport

В итоге компанией Apple было предложено решение — Метатег viewport.

Он был разработан для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Другими словами meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi). Данный метатег предназначен в большой степени для адаптивных сайтов, но с помощью него можно улучшить представления веб-страниц, имеющих фиксированную или гибкую разметку.

Отсюда ты должен сделать вывод, что этот метатег используется на адаптивных сайтах. Если он присутствует на странице — значит сайт адаптивный. В пот на сколько он хорошо адаптируется — это уже совсем другая история 🙂

Куда добавляется метатег

Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить.

Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

  • width=device-width
  • initial-scale=1

Параметры метатега

Рассмотрим каждый из них более подробно.

Первый параметр (width=device-width) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройства (device-width).

Тем самым мы приводим правила отображения контента на страницы к единому стандарту.

После чего содердимое сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана.

Второй параметр initial-scale — устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.

Если ты изменишь это значение к примеру на 150%, то при загрузке страницы в брауезе масштаб её содержимого будет увеличин в 1,5 раза.

Meta viewport и не адаптивные страницы

Если сайт не имеет адаптивный дизайн, то его представление на экране мобильного устройства предстваляет собой отображение той части которая вмещается, а остельное нужно просматривать по средствам горизонтального скрола.

Но это поведение можно улучшить.

Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.

Осуществляется это тоже с помощью установления параметру width значения device-width. Т.е. для не адаптивных сайтов в раздел head необходимо добавить следующую строчку:
<meta name="viewport" content="width=device-width">

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

Именнь поэтому в современой веб-разработке используют стандартизацию Вьюпорта.

Параменты viewport по умолчанию

Кроме того, разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.

 

Дополнительные материалы
Тут пока что пусто...
Тут пока что пусто...
0% Complete