禁止移动端safari浏览器双击放大事件

本身在一个微信项目优化过程遇到一个问题，因此记录下来。废话不说，下面进入正题。

1.添加meta便签

首先解决移动端浏览器放大问题通常是添加一个meta便签，防止用户手动放大网页问题。

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

该meta标签的做用是让当前viewport的宽度等于设备的宽度，同时不容许用户手动缩放。也许允不容许用户缩放不一样的网站有不一样的要求，但让viewport的宽度等于设备的宽度，这个应该是你们都想要的效果，若是你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

width:

控制 viewport 的大小，能够指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height:

和 width 相对应，指定高度。

initial-scale:

初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，若是你设置初始缩放为“1.0”，若是你设置为“2.0”，那么这个页面就会放大为2倍。

maximum-scale:

最大缩放。即容许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，若是你将这个值设置为“2.0”，那么这个页面最多能放大2倍。

user-scalable:

用户调整缩放。即用户是否能改变页面缩放程度。若是设置为yes则是容许用户对其进行改变，反之为no。默认值是yes。若是你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，由于根本不可能缩放。

以上设置完毕以后，在通常浏览器上已经实现了阻止用户手动放大页面。可是在ios safari浏览器上进行测试，发现双击页面，页面仍是会放大，那么咱们进行下一步的设置。

 

2.阻止click事件的触发

咱们认识的click事件在移动端浏览器实际上是默认完整touchstart-touchend这两个事件的触发，只要阻止其中的一个事件触发就能阻止click事件，那么有人会说为何不直接禁止掉click事件的触发？其实若是你没有点击的事件的需求的话，

彻底能够这么作。可是通常的页面都仍是须要点击的事件触发的。那么在这里，咱们的思路能够用touchstart事件来代替click事件来进行点击事件的触发，只要阻止touchend事件的默认事件就能够的。

    $('body').on('touchend',function(e) {
            e.preventDefault();
        });

这样就能够知足点击事件的触发，又能够阻止在ios safari浏览器出现页面双击放大。