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.
This question is related to
html
attributes
tags
viewport
meta-tags
The answer is
They are viewport meta tags, and is most applicable on mobile browsers.
width=device-width
This means, we are telling to the browser “my website adapts to your device width”.
initial-scale
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
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
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
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.
This post may help. https://css-tricks.com/snippets/html/responsive-meta-tag/ It gives a full description on the meta tags and its different attributes.
This meta tag is used by all responsive web pages, that is those that are designed to layout well across device types - phone, tablet, and desktop. The attributes do what they say. However, as MDN's Using the viewport meta tag to control layout on mobile browsers indicates,
On high dpi screens, pages with
initial-scale=1will effectively be zoomed by browsers.
I've found that the following ensures that the page displays with zero zoom by default.
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
user-scalable:
user-scalable=yes (default) to allow the user to zoom in or out on the web page;
user-scalable=no to prevent the user from zooming in or out.
You can get more detailed information by reading the following articles.
Demo Code (recommended)
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<meta http-equiv="X-UA-Compatible" content="IE=edge">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">_x000D_
</head>_x000D_
<body>_x000D_
<header>_x000D_
</header>_x000D_
<main>_x000D_
<section>_x000D_
<h1>do not using <mark>user-scalable=no</mark></h1>_x000D_
</section>_x000D_
</main>_x000D_
<footer>_x000D_
</footer>_x000D_
</body>_x000D_
</html>viewport meta tag on mobile browser,
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
It's for controlling aspect on mobile phones and tablets. You will find more info here : https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Source: Stackoverflow.com