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.

Answer 1

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!

Answer 2

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