Menu
The user-scalable attribute defines whether users can scale (zoom) the page content on mobile. By default, scaling is on, but if user-scalable is set to '0' or 'no' then this will prevent users from zooming, which negatively affects user experience (in most cases).
This viewport meta element prevents users to scale content up to 200% because it has maximum-scale set to 1.5.
Maximum-scale is an optional attribute for the viewport, and it defines the maximum zoom that website users are able to do.
The user-scalable="no" parameter for the <meta name="viewport"> element disables browser zoom on a web page. The maximum-scale parameter limits the amount the user can zoom. Both are problematic for users with low vision who rely on browser zoom to see the contents of a web page.
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.
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
<!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>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.
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With