Метатег viewport в CSS

Область просмотра (viewport) — это видимая часть веб-страницы, которую может видеть пользователь.

Размер области просмотра зависит от устройства. На мобильном телефоне он будет намного меньше, чем на экране компьютера.

Вы должны добавить следующий элемент <meta> в раздел <head> всех своих веб-страниц:

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

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства, которая меняется в зависимости от устройства.

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

Добавьте этот тег <meta> внутри <head> вашей HTML-страницы, чтобы задать область просмотра.

Пользователи привыкли прокручивать веб-страницы вверх и вниз как на настольных, так и на мобильных устройствах, но не из стороны в сторону.

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

Вот несколько правил, которым нужно следовать:

• Не используйте крупные элементы с фиксированной шириной. Например, если изображение шире области просмотра, это вызовет горизонтальную прокрутку. Всегда подгоняйте содержимое так, чтобы оно вписывалось в ширину области просмотра.
• Не позволяйте содержимому зависеть от конкретной ширины области просмотра, чтобы хорошо выглядеть. Размеры экранов сильно различаются между устройствами, поэтому ваше содержимое должно работать при любой ширине.
• Используйте медиазапросы CSS, чтобы применять разные стили для маленьких и больших экранов. Избегайте установки больших абсолютных значений ширины для элементов страницы. Используйте вместо этого относительные значения, например width: 100%. Также будьте осторожны с большими значениями абсолютного позиционирования, так как они могут вытолкнуть элементы за пределы области просмотра на маленьких экранах.