Войти
Регистрация

Мета-тег Viewport

Мета-тег viewport

Привет всем. В этой статье я расскажу Вам про мета-тег viewport и покажу его в действии, т.к. его лучше понять наглядно.

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

Приведу Вам простой пример. Создадим страницу с блоком и текстом внутри него, а также я задам фоновый цвет и размер блока, чтобы его было видно:

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Viewport</title>
</head>
<body>
  <h1>Заголовок 1</h1>
  <p>Первый абзац с тектом</p>
  <p>Второй абзац с тектом</p>
  <a href="http://editcode.ru">Перейти на сайт EditCode</a>
</body>
</html>

Если открыть эту страницу с мобильного устройства, то видно, что блок с текстом забился в левый угол, он маленький и текст мелкий. А вот если мы добавим мета-тег viewport внутри тега <head> с соответствующим значением:

<head>
  <meta name="viewport" content="width=device-width" />
</head>

то блок с текстом подгоняется автоматически под экран, чтобы было удобнее читать. Слева картинка без мета-тега viewport, справа уже с указанным мета-тегом:

Также можно добавить еще 3 значения этого мета-тега:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Значение initial-scale=1.0 задает масштаб отображения в 100%.

Значение maximum-scale=1.0 устанавливает максимальный масштаб 100%, user-scalable=no запрещает пользователю масштабировать страницу. Но эти значения лучше использовать с осторожностью, т.к. иногда пользователю приходится масштабировать страницу, т.к. шрифт может быть очень мелким.

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

На этом с темой "Мета-теги" у меня все, дорогие друзья. Увидимся в следующей статье.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?