移动端ios兼容问题整理

一、滚动不流畅

在需要滚动的元素上添加

 -webkit-overflow-scrolling: touch;

二、点击按钮出现外发光现象

 -webkit-tap-highlight-color: transparent;
 -webkit-appearance: none ;
 outline: 0 ;
 box-shadow: none ;

三、页面向下滑动时显示不全

代码底部添加一个空的div即可

四、ios下页面不置顶

方法一：
路由中添加属性 例：

方法二：添加滚动方法，初始化页面时调用

scollTop(){ 
  const u = navigator.userAgent
      const app = navigator.appVersion
      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      if (isIOS) {
        setTimeout(() => {
          window.scrollTo(0, 0)
        }, 200)
      }
}

五、输入框获得焦点时光标与输入框高度等高

例：

期望效果：

解决方法 ：
行高不要与给定高度一致 设置上下内边距
由：

    height: 70px;
    line-height: 70px;

改为：

     height: 70px;
     line-height: 40px;
     padding-top: 15px;
     padding-bottom: 15px;

六、new Date获取时间戳

在安卓机上new Date(‘2020-12-31’)可成功获取时间戳，ios无法获取
处理方法: 将字符串中-替换成/，.replace(/-/g,’’);

后期持续补充。。。。。。