HTML/CSS: Viewport
Для корректного отображения разметки HTML браузеры создают специальную копию разметки и вставляют её в «виртуальное окно», которое называется viewport. Зачастую данное окно шире, чем экран текущего устройства. Это сделано для того, чтобы все элементы поместились так, как задумывалось. Данный эффект можно увидеть, если зайти на неадаптированную HTML-страницу с мобильного устройства. В таком случае появляется горизонтальная полоса прокрутки.
Впервые данный метатег появился в браузерах от компании Apple «Safari». До появления мобильных устройств браузер Safari по умолчанию считал, что все страницы в интернете имеют ширину в 980 пикселей, из-за чего на первых версиях iPod и iPhone сайты отображались не полностью, а только первые 320 пикселей по ширине.
Сейчас такая проблема решается указанием ширины сайта для устройств. Наиболее часто используют значение device-width у параметра width, которое устанавливает ширину страницы, равную ширине экрана устройства.
<head>
<meta name="viewport" content="width=device-width">
</head>
Этим значением браузеру сообщается, что ширина страницы равна ширине устройства, с которого эта страница просматривается.
Сейчас вам может показаться это сложным, но, с изучением CSS, вы полностью поймёте смысл указания viewport. Сейчас важно знать про такой метатег и его основные варианты применения
Стоит обратить внимание, что параметры задаются внутри атрибута content, свойства в котором разделяются запятой.
Основные параметры метатега viewport
width— ширина сайта. Указывается в пикселях. Возможно использование значенияdevice-widthдля установки ширины страницы равной ширине устройства.height— высота сайта. Указывается в пикселях. Возможно использование значенияdevice-heightдля установки высоты страницы равной высоте устройства.initial-scale— начальный коэффициент масштабирования. Может принимать значение от 0.1 до 10.0. Значение единица масштабирует страницу по умолчанию.user-scalable— указывает, может ли пользователь масштабировать страницу, то есть приближать или отдалять её. Принимает значениеyesиno
Укажем viewport со следующими характеристиками:
- Ширина: 980px
- Масштаб: 1
- Запрет управления масштабированием. То есть запретить приближать или отдалять контент с помощью жестов или «горячих клавиш»
Для этого создаём метатег и, вначале указываем ширину. Это делается с помощью значения width:
<meta name="viewport" content="width=980">
Задать изначальный масштаб поможет значение initial-scale со значением 1.0. Оно означает, что страница выведется без какого-либо искажения, с теми размерами шрифтов и других элементов, которые были установлены разработчиками.
<meta name="viewport" content="width=980, initial-scale=1.0">
Последнее — запрет на масштабирование. Для этого добавим user-scalable со значением no
<meta name="viewport" content="width=980, initial-scale=1.0, user-scalable=no">
Базовое использование метатега viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Задание
Добавьте метатег viewport с шириной экрана 1024px, без возможности масштабирования со стороны пользователя
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.