Метатег Viewport

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

Прежде всего рассмотрим один из ключевых моментов применения адаптивного дизайна - метатег viewport (по сути с этого тега и начивается адаптиный дизайн). Пусть для начала у нас есть следующая веб-страница:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Обычная веб-страница</title>
    </head>
    <body>
        <h2>Обычная веб-страница</h2>
    </body>
</html>

Это стандартная веб-страница, которая в обычном браузере будет выглядеть следующим образом:

Не адаптивный дизайн в Google Chrome

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

Эмулятор Opera Mobile

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

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

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

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

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

Чтобы избежать подобной не очень приятной картины, следует использовать метатег 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>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
        <title>Обычная веб-страница</title>
    </head>
    <body>
        <h2>Обычная веб-страница</h2>
    </body>
</html>
веб-страница с использованием тега viewport в HTML5

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

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

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

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

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