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

IOS上的兼容问题

1、表单元素 input 和textarea 默认有内阴影 去除ios input默认样式：

// 解决方法: 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); // 时间戳

4、阻止ios页面回弹

引用这个https://github.com/lazd/iNoBounce里面的inobounce.min.js

import "../inobounce.min.js";

5、关于定位：

尽量避免使用固定定位

6、页面滑动，但是光标在原地不动，不随input框移动：

既然光标不动，那就干脆让它消失好了。监听页面移动事件，使所有input失去焦点
//添加监听事件，据说放在created里面也ok，不过我没试过，感兴趣的可以试试

 mounted() {
    window.addEventListener("touchmove", this.myTouchMove);
  }
myTouchMove() {
      if (document.hasFocus) {
        var inputList = document.getElementsByTagName("input"); // 获取input
        for (var i = 0; i < inputList.length; i++) {
          inputList[i].blur(); // input失焦
        }
      }
    },

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%;
}