Серёжа Сыроежкин
Серёжа СыроежкинКопирайтер
2.06.2015

Использование мета-тега Viewport

Тег meta viewport позволяет масштабировать веб-страницу для мобильных устройств. Чтобы понять принцип работы данного тега, рассмотрим пример. Создадим HTML-страницу следующего содержания:

<!DOCTYPE html>
<html>
 <head>
  <title>Конструктор сайтов "Нубекс"</title>
  <meta charset="utf-8">
  <style>
	body {
	background-color: #fa8e47;
	color: #fff;	
	}	
	#about {
	width:100%;
	}
  </style>
 </head>
 <body>
  <center>
  <div id="about">
	<img src="http://nubex.ru/templates/nubexsite/img/nubex.png" width="30%" />
	<h1>Уникальный конструктор сайтов для бизнеса</h1>
	<p>Ни один другой шаблонный сайт не сможет выглядеть столь оригинально, как конструктор сайтов «Нубекс».</p>
  </div>
  </center>
 </body>
</html>

Посмотрим, как будет отображаться наша страница на мобильном устройстве:

Страница с плохим отображением

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

Мы уже говорили о создании мобильной версии сайта (читайте статью Как сделать мобильную версию сайта), а теперь рассмотрим конкретную реализацию - с чего начать мобильную верстку. Как вы уже догадались, речь идет о масштабировании, и здесь нам на помощь приходит тег meta name viewport. Работает он следующим образом:

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

Из синтаксиса тега понятно, что тег указывает браузеру на то, чтобы в качестве ширины области просмотра использовалась ширина экрана устройства (а не значение браузера по умолчанию, которое обычно составляет 980px). Также в этой записи инициализируется масштаб страницы (initial-scale=1.0).

Добавим вышеуказанную запись между тегами <head></head> в нашем примере и зайдем на страницу снова с мобильного устройства:

Страница с хорошим отображением

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