There is an issue with iPhone that disables zooming even if
is set.

<meta content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0;" name="viewport" /> 
Copy the code

Webkit official explanation

If you’re too lazy to read the article above, these attributes are designed to enhance the user experience with appropriate Settings, and in most cases are set to disable zooming, making text difficult to read on low-resolution devices. So Webkit no longer works with this setting after iOS 10.

But there are some single-page apps that are designed for mobile devices that can provide a better user experience without zooming, so how do you set them up in Safari?

I searched the Internet for some answers, but unfortunately they are no longer available.

// Invalid code window.onload =function () {
    document.addEventListener('touchstart'.function (event) {
        if(event.touches.length > 1) { event.preventDefault(); }}); var lastTouchEnd = 0; document.addEventListener('touchend'.function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
};
Copy the code

The above example detects the number of fingers touched and disallows the default event if more than 2 fingers are touched. A quick click within 300 milliseconds also disables the default event firing.

But two-finger scaling doesn’t work properly.

In Chrome, the touchStart event is automatically added to passive:true. The event.preventDefault() function is disabled.

// Improved event listener window.onload =function () {
    document.addEventListener('touchstart'.function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, {
        passive: false// Disable passive listening}); var lastTouchEnd = 0; document.addEventListener('touchend'.function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
};
Copy the code

Luo Xiaohei writes

If you like the article please leave a like ~ if you like the article to share to more people ~

Follow me in nuggets follow me in Jane’s book

Free reprint – Non-commercial – Non-derivative – Keep attribution (Creative Commons 3.0 License) Please keep the link to the original article when reprint to ensure timely access to corrections and amendments to the article