解决方案： document.body.addEventListener(‘touchmove’, function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, {passive: false});

解决方案： 苹果机默认打开video是全屏的，所以要阻止默认全屏，加上下面这四个属性就可以啦 webkit-playsinline -----针对I0S9 playsinline------针对IOS10和11 IOS微信浏览器支持小窗内播放 x-webkit-airplay=“allow”----------启用AirPlay支持 x5-playsinline----------x5内核video

解决方案：

在iOS上，当点击一个链接或者通过js绑定了点击事件的元素时，会出现一个半透明的背景，当手指离开屏幕，灰色背景消失，出现“闪屏” html,body{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

部分安卓手机点击图片会放大，如需要禁止放大，只需要设置css属性，这样会让img标签的点击事件失效，如果想要给图片添加点击事件就要给上面再写一层。 img{ pointer-events:none; }

设置CSS属性: -webkit-user-select:none

css属性增加 cursor:pointer

body{ -webkit-overflow-scrolling:touch; overflow-scrolling:touch; }

方法：可以用html5的oninput事件去代替keyup

解决方式如下：

input,textarea { border: 0; -webkit-appearance: none; }

:input:-ms-clear{display:none;} 手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象 flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行，用其他方式代替。

.box{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. / display: -moz-box; / 老版本语法: Firefox (buggy) / display: -ms-flexbox; / 混合版本语法: IE 10 / display: -webkit-flex; / 新版本语法: Chrome 21+ / display: flex; / 新版本语法: Opera 12.1, Firefox 22+ */ }

line-height: （和input框的高度一样高）—pc端解决方法 line-height：normal —移动端解决方法

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }

$(function () { //获取浏览器的userAgent,并转化为小写 var ua = navigator.userAgent.toLowerCase(); //判断是否是苹果手机，是则是true var isIos = (ua.indexOf(‘iphone’) != -1) || (ua.indexOf(‘ipad’) != -1); if (isIos) { $(“input:file”).removeAttr(“capture”); }; })

这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。

解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

解决代码：

document.addEventListener(‘touchstart’,function() { document.getElementsByTagName(‘audio’)[0].play(); document.getElementsByTagName(‘audio’)[0].pause(); });

这个目前没有好的办法解决 情景一：页面有视频，点击页面按钮显示弹出层（比如让用户输入用户信息），这时候视频会出现在弹出层上面，是不是很-d疼？ 方案：点击按钮时候把video隐藏hide，关闭弹出层show，过程中视频声音还在 情景二：页面很长，往下翻滚时，视频在播放，脱离文档流 方案：页面滚动到某一合适位置把video隐藏hide，回滚到某一位置show，过程中视频声音还在 有些说position可以解决，我没有试

this.value = this.value.replace(/\u2006/g,’’);

iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。

-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100%;

原因：浏览器兴起初期，为了判断用户是双击还是单击，就设置了一个时间段300ms，用户单击后300ms后做事件处理，如果在300ms内连续点击，就判断为双击，做双击处理事件。 所以现在用click绑定事件呢，就会有300ms延迟的问题。 300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。

推荐两个js，一个是fastclick，一个是tap.js

案例如下：

div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：

$(’#haorooms’).on(‘tap’,function(){ $(this).hide(); });

我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。

原因：

touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。 解决：

尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。 用fastclick，https://github.com/ftlabs/fastclick 用preventDefault阻止a标签的click 延迟一定的时间(300ms+)来处理事件 （不推荐） 以上一般都能解决，实在不行就换成click事件。

下面介绍一下touchend事件，如下：

$("#haorooms").on(“touchend”,function(event) { event.preventDefault(); });