Мета-тег viewport

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

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

Свойство width указывает, под каким размером отображать сайт. Если указать width=600, то мобильное устройство отобразит сайт в ширину 600 пикселей. Значение device-width означает, что надо отображать сайт под размер текущего мобильного устройства.

В свойстве initial-scale указывается масштаб страницы. Значение 1 означает масштаб 100%.

Первый браузер, который стал использовать мета тег viewport, стал Safari.

Запретить масштабирование в мобильных устройствах

Запретить масштабирование в мобильных устройствах можно через два свойства:

1. maximum-scale — максимальный размер масштабирования;
2. user-scalable — разрешать масштабирование.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">