Menu
I have tried using the following meta view port tag to prevent browser zooming:
<meta content='width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi' name='viewport' />
This doesn't work though. I know that it is possible because my zooming is blocked on this website: futurism.xyz
The viewport tag for that website is this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
What am I doing wrong or missing?
794
By default, Chrome sets the zoom level to 100%. To manually adjust the settings, use the Ctrl key and “+” or “-” combos to increase or decrease the page magnification. If you are using a mouse, you can hold down the keyboard Ctrl key and use the mouse wheel to zoom in or out.
To disable pinch-zoom in HTML, simply add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> to the <head> section.
Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior.
Try this:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
or this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
You could use css.
body {
touch-action: none;
}<html>
<head>
</head>
<body>
Content here...
</body>
</html>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
