What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
Solution 1:
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.
Solution 2:
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.
http://www.html-5.com/metatags/meta-viewport.html
https://css-tricks.com/snippets/html/responsive-meta-tag/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes
Demo Code (recommended)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
</head>
<body>
<header>
</header>
<main>
<section>
<h1>do not using <mark>user-scalable=no</mark></h1>
</section>
</main>
<footer>
</footer>
</body>
</html>
Solution 3:
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.
Solution 4:
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=1
will 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">