在 iOS10 下,即使设置了 meta 标签的 user-scalable=no 依然不能阻止用户缩放。

解决此 BUG 的方法是阻止 PC 事件:

document.addEventListener('touchstart', function(ev) {
ev.preventDefault();
});

另外,此方法还能解决 iOS10 中横向页面溢出,即使给 body 设置了 overflow:hidden 依然能横向滑动的问题。

不过添加了此事件后会阻止 iOS10 的橡皮筋效果,另外也会禁止文字选中功能。

通过阻止 touchstart 的默认事件来解决此 BUG,另外阻止此默认事件还可以解决 300ms 延迟的 BUG。

当然,由于阻止了默认行为,那么 a 标签链接的默认跳转页就无法实现了,只能通过手动添加事件:

aDom.addEventListener('touchstart', function(ev) {
window.location.href = "www.tirion.me";
});

输入框获取焦点也需要手动解决:

inputDom.addEventListener('touchstart', function(ev) {
ev.stopPropagation();
});

通过阻止 touchstart 事件,解决移动端的 BUG的更多相关文章

  1. h5 移动端在阻止touchstart的默认事件时报错

    h5 移动端在阻止touchstart的默认事件时报错 解决办法, 可以添加 *{ touch-action: none;}即可消除错误

  2. 如何解决 touchstart 事件与 click 事件的冲突

    一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...

  3. fastclick.js解决移动端(ipad)点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

  4. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

  5. Touch事件在移动端web开发中的详解

    一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘 ...

  6. 解决移动端真机不能下拉滚动bug

    在近期的移动端开发中,发现浏览器中调试可以正常滚动,而在真机中却不能滚动了,这是为什么呢??? 总结了一下主要有一下两方面:css的设置和js的设置 1.之前有设置css的原因,下面分先说css的问题 ...

  7. 重载jquery on方法实现click事件在移动端的快速响应

    额,这个标题取的还真是挺装的... 其实我想表达的是jquery click事件如何在移动端自动转换成touchstart事件. 因为移动端click事件会比touchstart事件慢几拍 移动设备某 ...

  8. 安卓4.4不支持touchend事件解决办法

    最近的项目要求兼容到OPPO A31这款手机,这款手机是安卓4.4,调试时遇到了touch手指不能滑动页面切换的问题,最终解决通过在touchstart事件里面加上一个 event.preventDe ...

  9. tap,touch,touchstart,事件与click事件的区别

    根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动 ...

随机推荐

  1. Vue + Element UI 实现权限管理系统(工具模块封装)

    封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...

  2. [HDU4585]Shaolin

    Problem 问你一个数的前驱和后继 Solution Treap模板题 Notice 注意输出那个人的编号 Code #include<cmath> #include<cstdi ...

  3. 读书笔记 C# 接口之浅析

    一.接口可以包含 属性.方法.事件和索引器: 二.接口不能被实例化: 三.一个类可以继承多个接口: 四.接口不能包含方法的实现: 五.继承接口的类必须实现接口中所有成员: 六.显式实现接口的成员,不能 ...

  4. python中的各种模块(np,os,shutill)

    PS:本博文摘抄自中国慕课大学上的课程<Python数据分析与展示>,推荐刚入门的同学去学习,这是非常好的入门视频. #np模块 .ndim :维度 .shape :各维度的尺度 (2,5 ...

  5. :适配器模式:Adapter

    #ifndef __ADAPTER_H__ #define __ADAPTER_H__ #include <iostream> using namespace std; class Duc ...

  6. 强化学习9-Deep Q Learning

    之前讲到Sarsa和Q Learning都不太适合解决大规模问题,为什么呢? 因为传统的强化学习都有一张Q表,这张Q表记录了每个状态下,每个动作的q值,但是现实问题往往极其复杂,其状态非常多,甚至是连 ...

  7. 1-log4j2入门

    一.入门介绍 log4j apache实现的一个开源的日志组件 slf4j 日志接口即为所有日志框架制定的一种规范的标准接口,并不是一个框架的具体实现,需要配合具体的日志框架使用(如log4j2.lo ...

  8. select标签的相关操作,选中,获取option的值,二级联动

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. 校验总结:校验是否是中英文等等(1.正则校验 2.hibernate volidator)

    1.正则校验 import java.util.regex.Matcher;import java.util.regex.Pattern; public class Validation { //-- ...

  10. PAP认证(单向、双向)

    实验要求:掌握PAP单向.双向认证 拓扑如下: 单向验证 R1(认证方)enable 进入特权模式configure terminal 进入全局模式hostname R1 设置主机名interface ...