how to prevent zoom/scroll in HTLM5 or javascript

Question

I working on simple HTML5 page and using the below code to prevent zoom/scroll.

<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="landscape"/>
<meta name="viewport" content="user-scalable=0"/>

The Facebook app review team came back with the below feedback and rejected my app.

Developer Policy 1.2 - Build a Quality Product We found that your game allows zooming/scrolling outside of gameplay, which detracts from the in-game experience. Unless your game requires these motions for gameplay, please revise your game before resubmitting for review.

Not sure how to prevent zoom/scroll in HTML5 for iOS devices. Please help.

score 1 · Answer 1 · 2021-01-15T09:02:06.470

1

pras,
As @lukeocom suggests, if you have overflow issues, you can set the overflow property to hidden for overflowing issues. But if you just want to to disable zoom, you can use the following in your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

This should work on mobile, but not on desktop. If you want to disable zoom on desktops as well, you can attach an event listener to the Ctrl, + and - keys and then use e.preventDefault() in your JavaScript and do the same for Ctrl + mousewheel events.

Edit: Also, you can use zoom: reset in your CSS if you want to disable the zoom functionality for sure on the desktop. Though, this works only in Chrome.

These are my sources:
meta tag source
JavaScript source
MDN documentation for further reading

edited Jan 15 '21 at 09:02

answered Jan 15 '21 at 08:31

What if I use the browser's Zoom controls found in the menu and don't zoom with Ctrl+/- or Ctrl Mousewheel? ;) – enhzflep Jan 15 '21 at 08:52
1

You can use `zoom: reset` in the CSS for that! That works for Chrome :) – Jan 15 '21 at 08:57
That would make a good addition to your answer. – enhzflep Jan 15 '21 at 08:58
I am looking for option that works in Safari – pras Jan 15 '21 at 21:38
I have used the code below. This didn't fix the issue in Safari. Any suggestions please – pras Jan 15 '21 at 21:41
You can check out this StackOverflow answer to a similar question: https://stackoverflow.com/a/38573198/12859487 – Jan 17 '21 at 11:49
Your method doesn't work because iOS 10 and higher ignore the `user-scalable=no` meta tag. Also, you can try this `` – Jan 17 '21 at 11:53

score 0 · Answer 2 · edited Jan 15 '21 at 08:08

Im not sure if this will help you, but it sounds like you may have some overflow content. So you could try adding overflow: hidden to your html tag, or setting max-width/height, or setting absolute or fixed position:

:root,
html {
    overflow: hidden;
    position: absolute;//or fixed
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100vw;
    max-height: 100vh;
    }

Alternatively, inspect your page content and see if any containers are overflowing, and apply the above to that specific container, or fix the cause of the issue itself. Debug debug debug!

how to prevent zoom/scroll in HTLM5 or javascript

2 Answers2