viewport Что такое ?-viewport Что такое ?

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

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4" до 6". А самую большую - мониторы компьютеров, размеры диагоналей которых могут превышать 24".

Адаптивная разметка для просмотра на телефоне или планшете- это такая разметка, которую можно настроить под различные размеры экранов, с помощью медиа запросов, которые появились в спецификации CSS3 и в настоящий момент поддерживаются всеми основными браузерами.

Метатег viewport был разработан компанией Apple для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Другими словами meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi). Данный метатег предназначен в большой степени для адаптивных сайтов, но с помощью него можно улучшить представления веб-страниц, имеющих фиксированную или гибкую разметку.

<meta name="viewport" content="width=device-width, initial-scale=0.4"> на сайте у меня

Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить.

В данном случае эта информация касается viewport.

Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами: width=device-width initial-scale=1 Рассмотрим каждый из них более подробно. Первый параметр (width=device-width) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству (device-width).

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

Например, телефон с физическим разрешением 640x960 имеет CSS разрешение 320x480. Это означает то, что сайт с метатегом viewport (width=device-width) на этом устройстве будет выглядить так как будто бы это устройство имеет разрешение 320x480 (в данном случае вместо device-width будет подставляться значение 320px).

Т.е. на один CSS пиксель будет приходиться 4 физических пикселя (2 по горизонтали и 2 по вертикали).

Как же определить какое CSS разрешение будет иметь тот или иной экран устройства?

Определяется оно в зависимости от того какую экран имеет плотность пикселей. Если экран имеет плотность меньше 200ppi, то CSS-разрешение будет равно физическому. Если экран имеет плотность пикселей от 200 до 300 (ppi), то CSS-разрешение будет в 1.5 раза меньше физического. А если экран имеет плотность более 300ppi, то CSS разрешение будет определяться делением физического разрешения на некоторый коэффициент. Данный коэффициент определяется по формуле плотность/150ppi с округлением обычно до 2, 2.5, 3, 3.5, 4 и т.д.

Apple iPhone 6: физическое разрешение 750x1344, плотность пикселей - 326ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 326/150=2 (2.2 округляем до 2). CSS разрешение будет равно 375x667.
LG G4: физическое разрешение 1440x2560, плотность пикселей - 538ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 538/150=4 (3.6 округляем до 4). CSS разрешение будет равно 360x640.
Galaxy S3 mini: физическое разрешение 480x800, плотность пикселей - 233ppi. Плотность пикселей больше 200, следовательно, CSS коэффициент будет равен 1.5. CSS разрешение будет равно 320x533.
Galaxy S5: физическое разрешение 1080x1920, плотность пикселей - 441ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 441/150=3. CSS разрешение будет равно 360x640.

Второй параметр initial-scale - устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.

meta viewport и не адаптивные страницы

Если сайт не имеет адаптивный дизайн, то его представление на экране смартфона тоже можно улучшить.

Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.

Осуществляется это тоже с помощью установления параметру width значения device-width. Т.е. для не адаптивных сайтов в раздел head необходимо добавить следующую строчку:

<metaname="viewport"content="width=device-width">

Кроме того, разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.

Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

<metaname="viewport"content="initial-scale=1">

Дополнительные параметры meta viewport

Кроме основных параметров, тег meta viewport содержит много других.

Вот некоторые из них:

minimal-scale - задаёт минимальный масштаб;
maximal-scale - устанавливает максимальный масштаб;
user-scalable - указывает, может ли пользователь управлять масштабом или нет.

Примеры viewport с использованием дополнительных параметров:

<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<metaname="viewport"content="width=device-width, user-scalable=yes">
<metaname="viewport"content="width=1024">

24.07.2026

Главная »