移动端兼容整理

Updating...

1. 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;
    }
   

2. 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%; */
   }
   

3. 时间报错

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

   str = str.replace(/-/g,'/')
   
   

4. 刘海屏兼容问题

   • iso端

     1. 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">
        

     2. 容器设置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获取安全高度

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

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

   • android

     安卓的处理一般通过jsbridge，就是调用原生方法，获得该值。如果没有，设个固定值，能兼容大部分机型

     分辨率宽360px：rem*paddingTop=30.7
     

5. 文字行高偏上的问题

   • 使用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: 当字体出现奇数、小数，安卓手机为避免奇数字体带来的偏差会自动设置成偶数。

参考文档

1. -webkit-overflow-scrolling