禁止谷歌浏览器 表单缓存
在form中添加 autocomplete="off"
<form action="#" id="login-form" autocomplete="off">
或者在input上添加
<input name="phone" type="text" id="phone" class="input" placeholder="请输入手机号码" autocomplete="off"/>
覆盖移动端a标签点击样式
a{outline:none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
修改placeholder的样式
input::-webkit-input-placeholder{
/* your css */
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
/* your css */
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
/* your css */
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
/* your css */
}
移动端滑动事件触发touchend事件
解决办法
//避免touchmove事件影响touchend
stopTouchendPropagationAfterScroll();
function stopTouchendPropagationAfterScroll() {
var flag = false;
window.addEventListener('touchmove', function (ev) {
flag || (flag = true, window.addEventListener('touchend', stopTouchendPropagation, true));
}, false);
function stopTouchendPropagation(ev) {
ev.stopPropagation();
setTimeout(function () {
window.removeEventListener('touchend', stopTouchendPropagation, true);
flag = false;
}, 50);
}
}
缺点=影响图片滑动轮播（因为图片滑动轮播切换需要同时监听touchmove和touchend事件）
微信下ios的input[type=button]的表现得与安卓手机不一致
解决办法
用<button></button>代替，或者重新编写css去覆盖
vivo Android5.1.1微信浏览器不支持Array.findIndex()方法
解决办法
if (typeof [].findIndex !== "function") {
Array.prototype.findIndex = function (fn) {
var index = -1;
for (var i = 0; i < this.length; i++) {
if (fn(this[i], i, this)) {
index = i;
break;
}
}
return index
}
}
移动端click事件击穿（点击遮罩下的按钮会触发按钮的click事件）
解决办法：用touchend事件
