H5 常见iOS 和android 兼容问题

H5 常见iOS 和android 兼容问题

1.滚动失效

.scroll{
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

2.new Date()问题 IOS 不支持"-"符号

new Date("2023-07-20 13:53:22".replace(/-/g,"/"))

3.不合理的页面放大或者缩小

//在html中设置mate标签
<meta name=viewport content="width=device-width,initial-scale=1.0,mininum-scale=1.0,maxnum-scale=1.0,user-scalable=no">

4.动态切换样式class 名称 导致背景色和圆角不能用在同一个标签上，或者说用在同一个标签上会失效，丢失背景色

    //css
    .resource-item{
        border-radius: 6px;
        overflow: hidden;
        width:102px;
        height:32px;
    }
    .active{
        background-color: rgba(77, 129, 252, 0.15);
        color: #398AFF;
     }
     
   //react jsx
   
  <div  className={`${listStyles['resource-item']} `} > 
      <div className={`true ?listStyles['active']:listStyles['default']}`}>
          <span className={`iconfont ${it.icon}`} ></span>
          <span>{it.label}</span>
      </div>
  </div>