Несколько лет назад подавляющее большинство пользователей интернета пользовалось настольным ПК либо ноутбуком. Позже многие перешли на ноутбуки, а сегодня почти половина пользуется смартфонами для выхода в интернет.
Так что до недавних пор тег <viewport>
использовался мало, а теперь — это важная часть метаданных.
По умолчанию браузер считает, что страница сделана для десктопного экрана, поэтому просто пытается сжать видимую область и уместить её на экран телефона или планшета. Получается плохо.
Сравните: слева не указан 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+.
Вот вьюпорт стандартный который все используют