Viewport HTML: why it matters and how to use it

Viewport в HTML это метатег с атрибутом name="viewport", который определяет масштабирование и размеры экрана на мобильных устройствах, а также определяет начальный масштаб для отображения страницы в мобильном браузере.

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

• width — ширина, соответствует ширине устройства и экрана;
• height — высота, соответствует высоте устройства и экрана;
• initial-scale — начальный масштаб, которой определяет минимальный размер отображения страницы на мобильном устройстве;
• minimum-scale — минимальный доступный масштаб для устройства;
• maximum-scale — максимальный доступный масштаб для устройства.

Пример метатега с атрибутом viewport:

html

  

В данном примере мы указываем браузеру, что ширина страницы должна соответствовать ширине устройства, а начальный масштаб должен быть установлен на 1.

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

html

  

Это ограничит возможность масштабирования страницы пользователем без его разрешения.

Расширенный пример, где у нас две версии viewport'а для разных размеров устройств:

html

  
  
  
  

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

Использование viewport в HTML обеспечивает оптимальное отображение страницы на различных устройствах и повышает удобство использования сайта.