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

Уроки по верстке сайтов: мета-тег 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