H5页面在Android 及 iOS上得兼容问题

IOS上的兼容问题

1、表单元素 input 和textarea 默认有内阴影

// 解决方法: css样式设置
input, textarea {
    -webkit-apprance: none;
}

2、input 调用键盘屏幕上移后，失去焦点不自动缩回去

// 这里我们用js来解决

let keyboardRetraction;
if (isIOS()) {
    document.body.addEventListener('focusin', () => { // 软键盘弹起事件
        clearTimeout(keyboardRetraction);
    })
    document.body.addEventListener('focusout', () => { // 软键盘关闭事件
        clearTimeout(keyboardRetraction);
        keyboardRetraction = setTimeout(function() {
            // 当键盘收起的时候让页面回到原始位置
            window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
        }, 200)
   })
}

// 判断当前设备系统是否为iOS系统
function isIOS() {
    var UA = navigator.userAgent;
    if (UA.match(/iPad/) || UA.match(/iPhone/) || UA.match(/iPod/)) {
        return true;
    }else{
        return false;
    }
}

3、IOS设备 / Safari浏览器上，接口返回日期为字符串格式「 yyyy-MM-dd hh:mm:ss」, 经过new Date(str)后会出现NaN

// 正则  将 - 转为 /     .replace(/-/g,'/')
let dateStr = '2020-09-21 11:11:11';
let dateNum = new Date(dateStr.replace(/-/g,'/')).getTime();
console.log(dateNum); // 时间戳

Android上的兼容问题

1、上下滑动滚动条时卡顿、慢（这个滑动不流畅一般出现在局部的滚动，建议都写成 全局滚动）

// 解决方法：设置全局css的body样式
body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

2、某些Android手机圆角失效的bug

// 解决方法：对设置了圆角的元素进行css样式设置
background-clip: padding-box;

iOS和Android上共同出现的兼容问题

1、长时间按住页面出现闪退

// 解决方法: css样式设置
body {
    -webkit-touch-callout: none;
}

2、触摸元素时出现半透明灰色遮罩

// 解决方法: 针对被触摸的元素进行css样式设置，
// 比如该元素是a,实际情况可能是这样的:
// 获取验证码
.getCode {
    -webkit-tap-highlight-color: rgba(255,255,255,0);
}

3、旋转屏幕时，字体大小调整的问题

// 解决方法: css样式设置
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust: 100%;
}