禁⽌移动端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浏览器出现页⾯双击放⼤。 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。