Метатег Viewport

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

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

<!doctype html>
<html>
<head>
	<title>Обычный сайт</title>
</head>
<body>
<h2>Это обычный сайт</h2>
</body>
</html>

Запустив данную страничку в эмуляторе Opera Mobile, получим следующую картину:

веб-страница без использования тега viewport

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

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

Вся видимая область на экране браузера описывается понятием Viewport. По сути viewport представляет область, в которую веб-браузер пытается "впихнуть" веб-страницу. Например, браузер Safari на iPone и iPod определяет ширину viewport по умолчанию равной 980 пикселям. Затем, получив страницу с сервера и вписав в viewport с шириной 980 пикселей, браузер сжимает ее до размеров мобильного устройства. Например, если ширина экрана смартфона составляет 320 пикселей, то до этого размера потом будет сжата страница. И ко всем элементам страницы будет применен коэффициент масштабирования, равный 320/980.

Почему в данном случае используется именно 980 пикселей, а, скажем, не реальный размер экрана? Все дело в том, что по умолчанию браузер считает, что каждая веб-страница предназначена для десктопов. А обычной шириной десктопного сайта можно считать 980 пикселей.

При этом для каждого браузера устанавливается своя ширина области viewport, необязательно 980 пикселей, например, IE поддерживает в качестве начальной ширины 1024 пикселя. Но общая картина будет та же.

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

Общее объявление метатега следующее:

<meta name="viewport" content="параметры_метатега">

В атрибуте content мета-тега мы можем определить следующие параметры:

Параметр

Значения

Описание

width

Принимает целочисленное значение в пикселях или значение device-width

Устанавливает ширину области viewport

height

Принимает целочисленное значение в пикселях или значение device-height

Устанавливает высоту области viewport

initial-scale

Число с плавающей точкой от 0.1 и выше

Задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования

user-scalable

no/yes

Указывает, может ли пользователь с помощью жестов масштабировать страницу

minimum-scale

Число с плавающей точкой от 0.1 и выше

Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования

maximum-scale

Число с плавающей точкой от 0.1 и выше

Задает максимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования

Теперь изменим предыдущий пример веб-страницу, использовав метатег:

<!doctype html>
<html>
<head>
	<title>Обычный сайт</title>
	<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>Это обычный сайт</h2>
</body>
</html>
веб-страница с использованием тега viewport

Веб-страничка определенно выглядит лучше благодаря использованию метатега viewport. Используя параметр width=device-width мы говорим веб-браузеру, что в качестве начальной ширины области viewport надо считать не 980 пикселей или какое-то другое число, а непосредственную ширину экрана устройства. Поэтому затем веб-браузер не будет проводить никакого масштабирования, так как у нас ширина viewport и ширина одинаковы.

Мы также можем использовать другие параметры, например, запретить пользователю масштабировать размеры страницы:

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

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850