Мета-тег ViewPort
Рубрика: HTML верстка
Разберем мета-тег viewport , от компании Apple:
device-width - необходим для того что бы устройство правильно отобразило сайт на устройстве, то есть подобрало ширину странице для экрана, а не использовала ту что указана по умолчанию у самого сайта. Задавать ширину самостоятельно не рекомендуется.
initial-scale - задает начальный масштаб страницы, то есть как отобразить сайт на устройстве при загрузке, 1 к 1 и увеличено или уменьшено в масштабе, этим параметром можно также запретить или ограничить масштабирование сайта на устройстве что также не рекомендуется.
user-scalable - запрещает или разрешает масштабирование страницы сайта.
То есть если у вас заверстано несколько макетов для различных разрешений (таких как 320, 640 и тд.) то вам подойдет задать такие параметры:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Нельзя сочетать такие параметры как user-scalable=no или maximum-scale=1 с initial-scale=1. Отключите возможность масштаба страницы! Тем самым не вся страница сможет просматриваться на устройстве, пример:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Таблица описания значений мета-тега viewport:
| Атрибут | Значение | Описание |
|---|---|---|
| user-scalable | no или yes | Запрещает или разрешает изменять масштаб. По-умолчанию, разрешается. |
| width | Может принимать значение от 200px до 10,000px или постоянное значение device-width. |
Задает ширину. Если ничего не указывать то по умолчанию Safari =980px, Opera = 850px, Android WebKit = 800px, а в IE — 974px. |
| height | Значения от 223px до 10,000px или постоянное deviceheight |
Задает высоту. Задавать не обязательно. |
| initial-scale | Число от 0.1 до 10. Значение 1.0 — означает не масштабировать |
Задает первичный масштаб страницы. Чем больше значение, тем больше масштаб. |
| minimum-scale | Число от 0.1 до 10. 1.0 — не масштабировать |
Задает MIN масштаб. По-умолчанию - 0.25 |
| maximum-scale | Число с точкой от 0.1 до 10. 1.0 — не масштабировать |
Задает MAX масштаб. По-умолчанию - 1.6 |
Поделись с друзьями:
Комментарии к записи Мета-тег ViewPort отключены
Нет комментариев для записи Мета-тег ViewPort