Мета тег viewport в html

Мета тег viewport отвечает за область просмотра сайта на экране. Проще говоря — это настройка ширины экрана для сайта. Например, сайт на мониторе ПК будет корректно выглядеть, а на смартфоне будет плохо читаем, т.к. слишком мелкий шрифт.

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

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

Синтаксис viewport

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

Выше было указано только два атрибута width и initial-scale, которые отвечают за ширину и масштаб соответственно. Через запятую можно задать еще и другие параметры. Рассмотрим все возможные атрибуты.

  • width — устанавливает ширину области просмотра браузером. Принимает целочисленное значение (от 200 до 10000) в пикселях или device-width. Этот атрибут обязателен для адаптивных версток сайта.
  • height — устанавливает высоту области просмотра браузером. Принимает целочисленное значение в пикселях (от 200 до 10000) или значение device-height. Поскольку определяющим фактором является ширина, то высоту указывать не обязательно для адаптивной верстки.
  • initial-scale — коэффициент масштабирования. Принимает вещественные значения (от 0.1 до 10.0). Значение “1.0” стоит по умолчанию, что означает каждый физический пиксель соответствует аппаратному пикселю.
  • user-scalable — устанавливает можно ли пользователю масштабировать страницу. Принимает два значения: no/yes
  • minimum-scale — задает минимальный масштаб. Измеряется в вещественных числах.
  • maximum-scale — задает минимальный масштаб. Измеряется в вещественных числах.

Примеры с viewport


<!-- Запрещено увеличивать масштаб -->
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">

<!-- Разрешено изменять масштаб -->
<meta name="viewport" content="width=device-width, user-scalable=yes">

<!-- Задание ширины просмотра в 1600 пикселя -->
<meta name="viewport" content="width=1600">

Как связан физический и аппаратный пиксель

Новые смартфоны имеют высокое разрешение. В связи с этим надо делать уточнению по атрибуту initial-scale, который отвечает за масштабирование. Дело в том, что делая масштаб 1.0, мы добьемся слишком маленького текста, который невозможно будет читать. Поэтому применяется следующая таблица при преобразовании масштаба для устройств с высокой плотностью пикселей.

Плотность пикселей экрана CSS коэффициент
< 200 ppi (меньше) 1.0
В диапазоне 200..300 ppi 1.5
> 300 ppi (больше) плотность/150 (округление с точностью до 0.5)



Читайте также:

• HTML тег <form> – подробное описание с примерами

• HTML тег <a> – подробное описание с примерами

• Фреймы (теги <framne>, <frameset>, <noframe>, <iframe>)

• Коды символов для HTML

• Как сделать фон для сайта

• Что такое микроразметка сайта

• Подробное описание тега <noindex> и rel=”nofollow”

• Мета тег charset


← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.