Несколько лет назад подавляющее большинство пользователей интернета пользовалось настольным ПК либо ноутбуком. Позже многие перешли на ноутбуки, а сегодня почти половина пользуется смартфонами для выхода в интернет.

Так что до недавних пор тег <viewport> использовался мало, а теперь — это важная часть метаданных.

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

Сравните: слева не указан viewport, справа — указан:

уроки верстки html viewport

Чтобы объяснить браузеру, что страница на самом деле для большого экрана и надо её адаптировать, нужно задавать тег viewport. Как видите на примере, этот тег очень важен для мобильной версии.

Виды viewport

АтрибутЗначениеОписание
widthЦелое значение от 200 до 10.000px
или константа device-width.
Определяет ширину viewport. Если ширину не указывать, то мобильный Safari принимает ширину за 980px, Opera — 850px, Android — 800px, IE — 974px.
heightЦелое значение от 223 до 10.000 px или константа deviceheightОпределяет высоту, для удобства вёрстки этот атрибут лучше не указывать, чтобы он определялся автоматически
initial-scaleЧисло с точкой от 0.1 до 10. Значение 1.0 означает не масштабироватьОпределяет начальный масштаб страницы. Чем больше число, тем выше масштаб.
user-scalableyes или noРазрешать ли пользователю менять масштаб страницы в окне браузера. По умолчанию yes.
minimum-scaleЧисло с точкой от 0.1 до 10. Значение 1.0 означает не масштабироватьМинимальный масштаб viewport. По умолчанию 0.25.
maximum-scaleЧисло с точкой от 0.1 до 10. Значение 1.0 означает не масштабироватьМаксимальный масштаб viewport. По-умолчанию 1.6.

Поддержка браузерами

Метатег viewport поддерживается всеми современными браузерами.

  • Android, до версии 2.2 начальный масштаб равен 1.0;
  • Symbian, Nokia 40, Motorola, Opera mobile/mini и NetFront не поддерживают;
  • IE6+;
  • BlackBerry 4.2.1+.
Поширити у Фейсбуці
Надіслати у Messenger
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

1 коментар

спочатку нові
за рейтингом спочатку нові за хронологією

Вот вьюпорт стандартный который все используют