Responsive web design - Видport

Что такое viewport?

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

Viewport варьируется в зависимости от устройства, и на мобильных телефонах он будет меньше, чем на экране компьютера.

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

Затем, когда мы начали использовать планшеты и телефоны для выхода в интернет, веб-страницы фиксированного размера были слишком большими, чтобы адаптироваться к viewport. Чтобы решить эту проблему, браузеры на этих устройствах уменьшают всю страницу пропорционально, чтобы она соответствовала размеру экрана.

Это не идеально! Это всего лишь быстрое исправление.

установку viewport

HTML5 ввел метод, который позволяет веб-дизайнерам через <meta> теги для управления viewport.

Вы должны включать следующие <meta> Элемент viewport:

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

Он предоставляет браузеру инструкции о том, как контролировать размер и масштаб страницы.

width=device-width Некоторые настройки устанавливают ширину страницы в зависимости от ширины экрана устройства (в зависимости от устройства).

Когда браузер впервые загружает страницу:initial-scale=1.0 Некоторые настройки начального уровня масштабирования.

Ниже приведены примеры веб-страниц без и с метатегом viewport meta:

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



Без метатега viewport


С метатегом viewport

Настройка содержимого под размер видимой области (viewport)

Пользователи привыкли прокручивать сайты на компьютерах и мобильных устройствах вертикально, а не горизонтально!

Таким образом, если пользователям приходится прокручивать или уменьшать страницу, чтобы увидеть её целиком, это может привести к плохому пользовательскому опыту.

Некоторые дополнительные правила, которые还需要遵守：

1. Не используйте элементы с большой фиксированной шириной - Например, если ширина изображения больше ширины видport, это может привести к горизонтальному скроллингу видport. Убедитесь, что это содержимое адаптировано для ширины видport.

2. Не следует позволять содержимому зависеть от конкретной ширины видport для достижения良いх результатов - Из-за значительных различий в размерах экранов и ширине в устройствах, содержимое не должно зависеть от конкретной ширины видport для достижения良いх результатов.

3. Использование CSS медиа-запросов для применения различных стилей для малых и больших экранов - Установка большого абсолютного ширины CSS для элементов страницы приводит к тому, что эти элементы слишком широки для较小的 экранов. Вместо этого следует учитывать использование относительных значений ширины, таких как width: 100%. Также следует быть осторожными с использованием больших абсолютных значений positioning, что может привести к тому, что элементы выскользнут за пределы видимости на небольших устройствах.