移动端兼容整理

Updating...

IOS 端box-radius/overflow:hidden失效

ios端设置box-radius后，如果设置transform属性，会导致overflow:hideen失效，改为下面的写法会修正此问题

 .radius-hidden{
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-appearance: none;
    border-radius: 5px;
    overflow: hidden;
 }

IOS端scroll滚动不流畅

ios端，滚动条不能满足惯性滚动，添加-webkit-overflow-scrolling: touch;可以解决此问题，
```
.css{
    /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
    -webkit-overflow-scrolling: touch;
    /* 当手指从触摸屏上移开，滚动会立即停止 */
    -webkit-overflow-scrolling: auto;
}
```
这个属性还可以解决以下问题
- 滚动中 scrollTop 属性不会变化
- 手势可穿过其他元素触发元素滚动
- 滚动时暂停其他 transition
- pisition:fixed 抖动问题
添加此属性后，滚动元素可能会发生卡顿现象，解决方法：将设置该元素的子元素高度+1，主动触发scrollbar
```
.main-inner {
    min-height: calc(100% + 1px);
    /* min-height: 101%; */
}
```
时间报错

-连接的时间字符串，ios端解析报错，转变成/连接就行了。或者通过moment.js转换（库太大，不推荐）
```
str = str.replace(/-/g,'/')
```

刘海屏兼容问题

iso端

viewport添加viewport-fit=cover

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">

容器设置padding-top

    /* 首页-头部刘海屏兼容设置 */
    @supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch){
       .page{
            padding-top: 20px;
            padding-top: calc(~'constant(safe-area-inset-top) + 20px');
            padding-top: calc(~'env(safe-area-inset-top) + 20px');
        }  
    }

ios刘海屏兼容，可以通过constant/env获取安全高度

另一种：设置固定值，375px宽

    刘海屏：rem*pdt=44;
    非柳海平:rem*pdt=15

android

安卓的处理一般通过jsbridge，就是调用原生方法，获得该值。如果没有，设个固定值，能兼容大部分机型
```
分辨率宽360px：rem*paddingTop=30.7
```

文字行高偏上的问题
- 使用flex布局
  .flex{display:flex;align-items:middle }
- 使用table-cell
  .table-cell{display:table-cell; vertiacl-align:middle}
- 使用transform，先将元素属性整体放大两倍，在scale(0.5)
  .tsf{transform:scale(0.5); transfrom-origin:0,0}
- 计算padding
tips: 当字体出现奇数、小数，安卓手机为避免奇数字体带来的偏差会自动设置成偶数。

参考文档

-webkit-overflow-scrolling

最后编辑于：2020.07.22 18:19:35