H5 页面在IOS safari 中点击可以放大的问题？想禁用这个放大的功能？

Question

html 中已经加入这个，但是现在还是可以点击放大？

    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">

Answer 1

在 iOS 10 及更高版本的 Safari 浏览器中，user-scalable=no 和 maximum-scale=1.0 的设置会被忽略。这是因为 Apple 希望用户能够自由缩放网页以获得更好的阅读体验。

使用 JavaScript 禁用双指缩放和双击缩放

// 禁用IOS双指缩放和双击缩放, 安卓则不需要下面这个段代码

(function() {
    var isIOS = /iphone|ipad/i.test(navigator.userAgent.toLowerCase());

    if (isIOS) {
        // 禁用双指缩放
        document.documentElement.addEventListener('touchstart', function(event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        }, false);

        // 禁用双击缩放
        var lastTouchEnd = 0;
        document.documentElement.addEventListener('touchend', function(event) {
            var now = Date.now();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    }
})();

Answer 2

主要是这两个属性：
maximum-scale=1.0：限制1.0
user-scalable=no：禁缩放功能

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

这个不行的话再加一个：

document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, { passive: false });

document.addEventListener('touchmove', function(event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, { passive: false });