移动端兼容性问题总结

1. iOS (iPhone和iPad)的点击闪屏问题

原因：在ios上，当点击一个链接或者通过js绑定了点击事件的元素时，会出现一个半透明的背景，当手指离开屏幕，该灰色背景消失，出现“闪屏”；

解决方法：

方法一：将半透明的遮罩层改为全透明（验证可行）

html, body {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

方法二：将click改为tap绑定点击事件（未验证）

2. ios上使用history.go（-1）时不会重新加载页面，Android会重新加载

原因：iOS在微信和支付宝扫码页面上浏览器回退是不重新加载页面的，有些时候是需要重新加载的，就出现了问题。

解决方法：

方法一：监听回退事件

$(function(){
    pushHistory();
});

// 函数定义
function pushHistory(){
    window.addEventListener("popstate", function(e){
        alert("回退！");

        //window.history.back();
        //在历史记录中后退,这就像用户点击浏览器的后退按钮一样。

        //window.history.go(-1);
        //你可以使用go()方法从当前会话的历史记录中加载页面（当前页面位置索引值为0，上一页就是-1，下一页为1）。

        //self.location=document.referrer;
        //可以获取前一页面的URL地址的方法,并返回上一页。
    }, false); 

    var state = {
        title:"",
        url: "#"
    }; 
    window.history.pushState(state, "", "#"); 
}

方法二：pageShow事件中通过e.persisted判断页面是否来自BF Cache，是则重新加载。

window.addEventListener('pageshow', function(e) {
    // 通过persisted属性判断是否存在 BF Cache
    if (e.persisted) {
        location.reload();
    }
});