How to prevent desktop browser (Chrome, Safari) from zooming a webpage
22,415
Solution 1
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" />
Solution 2
You could use css.
body {
touch-action: none;
}<html>
<head>
</head>
<body>
Content here...
</body>
</html>
Author by
thundergolfer
Data Engineering @Canva. Previously @zendesk ML, @atlassian
Updated on May 28, 2020Comments
-
thundergolfer about 4 years
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?