IOS微信浏览器兼容问题汇总

1、IphoneX底部横线遮挡导航的问题

判断设备是否是IphoneX，如果是，则增加底部导航20px

function isIPhoneX(fn) {
    var u = navigator.userAgent;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isIOS) {
        if (screen.height >= 812 && screen.width == 375) {
            $('.xshop-main-container').css('bottom', '70px');
            $('.xshop-main-navs').css("height", "70px");
        }
    }
}

2、除button与a标记以外，其它元素不触发click事件的问题

需要点击的元素增加：cursor:pointer;

也可以给 * 加；

 

3、增加了cursor:pointer;的元素，在安卓中会出现淡蓝色遮罩的问题：

*{
    -webkit-tap-highlight-color: transparent;
}

4、正常超出部分卡死的问题：

父元素需增加：

overflow: auto;
-webkit-overflow-scrolling: touch;