Мета-тег viewport
По умолчанию, сайт в мобильных устройствах масштабируется по размеру сайта. Чтобы открывать под исходное разрешение экрана, используется мета тег viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
Свойство width указывает, под каким размером отображать сайт. Если указать width=600, то мобильное устройство отобразит сайт в ширину 600 пикселей. Значение device-width означает, что надо отображать сайт под размер текущего мобильного устройства.
В свойстве initial-scale указывается масштаб страницы. Значение 1 означает масштаб 100%.
Первый браузер, который стал использовать мета тег viewport, стал Safari.
Запретить масштабирование в мобильных устройствах
Запретить масштабирование в мобильных устройствах можно через два свойства:
maximum-scale— максимальный размер масштабирования;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">