Stop Side to Side Slop for Mobile on iOs by Preventing Zoom

Posted on Posted in Tips

As per my last post, the iOs 10 woes continue as far as side to side slop goes for my sites so I keep looking. The latest update to preventing slop (the bouncy side to side movement that shows up when viewing/scrolling your site on iPhone). This post addresses some issues like preventing the zoom on form elements by setting them to 16px min on mobile.

I find the problem continues if you don’t prevent zoom. Preventing zoom is a bummer for some users but you choose. For all OS set your viewport to prevent zoom on all but iOs:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

Next add this code to prevent zoom/pinch on iOs 10. There are a few ways to beat this so the hunt continues. For now this advances the tide. Good Luck. Code from this discussion.

document.addEventListener(‘touchmove’, function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, false);
var lastTouchEnd = 0;
document.addEventListener(‘touchend’, function (event) {
var now = (new Date()).getTime();
if (now – lastTouchEnd <= 300) {
lastTouchEnd = now;
}, false);