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