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,实际情况可能是这样的:
// <a class="getCode" href="javascript:void(0)">获取验证码</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%;
}
