Адаптивный веб-дизайн -Viewport

Что такое Viewport?

viewport — это видимая область веб-страницы пользователя.

На китайском языке viewport можно перевести как '视区'.

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

Настройка Viewport

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

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

• width: управляет размером viewport. Ему можно задать конкретное значение, например 600, или специальное значение, например device-width, которое представляет собой ширину устройства (в CSS-пикселях при масштабе 100%).
• height: соответствует width, задаёт высоту.
• initial-scale: начальный коэффициент масштабирования, то есть коэффициент масштабирования при первой загрузке страницы.
• maximum-scale: максимальный коэффициент, до которого пользователю разрешено масштабировать.
• minimum-scale: минимальный коэффициент, до которого пользователю разрешено масштабировать.
• user-scalable: может ли пользователь масштабировать вручную.

Следующие примеры демонстрируют эффект от использования viewport по сравнению с его отсутствием на мобильных устройствах:

Пример 1: Без добавления viewport:

Пример 2: С добавленным viewport:

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