如何禁用移动响应式缩放? [英] How to disable zoom in mobile responsive?

问题描述

我已经编写了以下代码来禁用放大或缩小:

 <元名称=视口" content ="width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no"/>< meta name ="HandheldFriendly" content ="true"/> 

除了在最近的iphone (例如:iphone 6，iphone 7)中，该功能无法正常运行，在所有手机中都可以正常使用.我在哪里弄错了?

解决方案

我终于想出了如何在ios 10上阻止它.
首先，我发现一篇文章说，从ios 10开始，Safari浏览器就忽略了视口meta的使用；这是链接..>

然后，这就是我作为解决方法找到的解决方案:

  $(this).on('touchmove'，function(event){如果(event.originalEvent.scale！== 1){event.preventDefault();event.stopPropagation();}}); 

注意:

• event.preventDefault(); 应该可以自行工作，而无需使用 event.stopPropagation(); .我添加它只是为了确保其他元素不会受到干扰.
• 我在ipad和iphone上进行了测试，效果很好.
• 我还使用了< meta name ="viewport" content ="width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no"> 用于其他设备.

I have written this code for disabling zoom in or out:

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

It is working fine in all mobile phones except in recent iphones (ex: iphone 6, iphone 7), where this function not working. Where did I make a mistake?

解决方案

I finally figured out how to prevent it on ios 10.
First, i found an article where it says that since ios 10, the use of viewport meta is kinda ignored from safari; here's the link.

Then, that's the solution i found out as workaround:

$(this).on('touchmove', function (event) {
    if (event.originalEvent.scale !== 1) {
        event.preventDefault();
        event.stopPropagation();
    }
});

Notes:

• event.preventDefault(); should works by itself without using event.stopPropagation();. I added it just to be sure other elements won't catch the pinch.
• I tested it on ipad and iphone, and it works good.
• I also used the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" > for the other devices.

这篇关于如何禁用移动响应式缩放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！