I was going through the source code of a website and found this piece of code.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
I want to know what this initial scale, user-scalable, minimum-scale, maximum-scale are and what does those values mean? And also tell me what all values they accepts.
They are viewport meta tags, and is most applicable on mobile browsers.
This means, we are telling to the browser “my website adapts to your device width”.
This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixel is equal to 1 viewport pixel. This parameter help when you're changing orientation, or preventing default zooming. Without this parameter, responsive site won't work.
Maximum-scale defines the maximum zoom. When you access the website, top priority is maximum-scale=1, and it won’t allow the user to zoom.
Minimum-scale defines the minimum zoom. This works the same as above, but it defines the minimum scale. This is useful, when maximum-scale is large, and you want to set minimum-scale.
User-scalable assigned to 1.0 means the website is allowing the user to zoom in or zoom out.
But if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.