移动端开发杂项

禁止谷歌浏览器 表单缓存

在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事件