How to Disable Scrolling on Mobile Devices So let’s start out with setting the viewport meta in the head tags to non-scalable, like so: <meta name="viewport" content="width=device-width, user-scalable=no" > This will disable the pinch–and–zoom effect as expected, but if you swipe vertically, the viewport will scroll and you’ll end up seeing a random bar at the bottom of the HTML page. That “bar” is the color of the HTML page below your view, which is showing because of what seems like extra padding at the bottom of the HTML. I’m not sure why this happens, but it’s not an issue with your code! This undesired effect happens on both Android and iOS browsers. In addition to how bad it looks, your app or game just got moved out of the viewport slightly! Luckily, this is an easy fix. If you’re using jQuery, you would use this snippet of code: $(document).bind('touchmove', function(e) { e.preventDefault(); }); Otherwise, if you’re not, he...
“ It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free. ”