Отзывчивый веб-дизайн — область просмотра
Что такое окно просмотра?
Область просмотра — это видимая пользователем область веб-страницы.
Окно просмотра зависит от устройства и будет меньше на мобильном телефоне, чем на экране компьютера.
До появления планшетов и мобильных телефонов веб-страницы разрабатывались только для экранов компьютеров, и веб-страницы обычно имели статичный дизайн и фиксированный размер.
Затем, когда мы начали бродить по Интернету с помощью планшетов и мобильных телефонов, веб-страницы фиксированного размера были слишком велики, чтобы поместиться в окне просмотра. Чтобы исправить это, браузеры на этих устройствах уменьшили масштаб всей веб-страницы до размеров экрана.
Это было не идеально!! Но быстро исправить.
Настройка области просмотра
HTML5 представил метод, позволяющий веб-дизайнерам управлять областью просмотра с помощью
<meta>тега.
Вы должны включить следующий <meta>элемент области просмотра на все свои веб-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Это дает браузеру инструкции о том, как управлять размерами и масштабированием страницы.
Эта width=device-widthчасть устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).
Эта initial-scale=1.0часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра:
Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки выше, чтобы увидеть разницу.
Размер содержимого в области просмотра
Пользователи привыкли прокручивать веб-сайты вертикально как на настольных, так и на мобильных устройствах, но не горизонтально!
Таким образом, если пользователь вынужден прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть всю веб-страницу, это приводит к плохому взаимодействию с пользователем.
Некоторые дополнительные правила, которые необходимо соблюдать:
1. НЕ используйте большие элементы с фиксированной шириной. Например, если изображение отображается с шириной, превышающей область просмотра, это может привести к горизонтальной прокрутке области просмотра. Не забудьте настроить это содержимое, чтобы оно соответствовало ширине области просмотра.
2. НЕ позволяйте контенту полагаться на определенную ширину области просмотра для хорошей визуализации . Поскольку размеры экрана и ширина в пикселях CSS сильно различаются между устройствами, контент не должен полагаться на определенную ширину области просмотра для хорошей визуализации.
3. Используйте медиа-запросы CSS, чтобы применять разные стили для маленьких и больших экранов . Установка большой абсолютной ширины CSS для элементов страницы приведет к тому, что элемент будет слишком широким для области просмотра на меньшем устройстве. Вместо этого рассмотрите возможность использования относительных значений ширины, таких как ширина: 100%. Кроме того, будьте осторожны с использованием больших абсолютных значений позиционирования. Это может привести к тому, что элемент выпадет за пределы области просмотра на небольших устройствах.