Viewport meta tag

Пример работы viewport

• Тег <meta name="viewport"> создан компанией Apple для iPhone. Другие браузеры также внедрили у себя этот тег со схожим поведением

• Официального стандарта пока не существует. Есть черновик спецификации viewport: здесь.

• Предназначен для изменения размера окна просмотра макета страницы.

• Перевод хорошей статьи: здесь.

• Код

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  

  означает, что браузер (возможно) отобразит ширину страницы по ширине своего экрана. Поэтому, если этот экран имеет ширину 320 пикселей, окно браузера будет иметь ширину 320 пикселей, а не уменьшаться и отображать 960 пикселей (или что-то еще, что делает это устройство по умолчанию, вместо ответного метатега).

• Примечание. Не используйте отзывчивый метатег, если ваш сайт специально не разработан, чтобы быть отзывчивым и хорошо работать в этом размере, так как это ухудшит работу.

Viewport: свойства

1. width
2. height
3. initial-scale
4. minimum-scale
5. maximum-scale
6. user-scalable