Метатег Viewport

Метатег Viewport

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

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

 

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

Метатег viewport

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

 

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

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: