20 Листопад 2015
2 649
Рубрика: уроки

Уроки по верстке сайтов: мета-тег viewport

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

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

Так что до недавних пор тег <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-scalable yes или 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+.
Тепер я хочу бачити коментарі 1