Rivalry2

HTML Diff

1 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15 <h2>Масштабирование</h2>

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

17 initial-scale=1.0

18 initial-scale=2.0

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

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

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

22 + <h2>Распространённое значение мета-тега viewport</h2>