Updating...

1. IOS 端box-radius/overflow:hidden失效

   ios端設(shè)置box-radius后，如果設(shè)置transform屬性，會(huì)導(dǎo)致overflow:hideen失效，改為下面的寫(xiě)法會(huì)修正此問(wèn)題

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

2. IOS端scroll滾動(dòng)不流暢

   ios端，滾動(dòng)條不能滿(mǎn)足慣性滾動(dòng)，添加-webkit-overflow-scrolling: touch;可以解決此問(wèn)題，

   .css{
       /* 當(dāng)手指從觸摸屏上移開(kāi)，會(huì)保持一段時(shí)間的滾動(dòng) */
       -webkit-overflow-scrolling: touch;
       /* 當(dāng)手指從觸摸屏上移開(kāi)，滾動(dòng)會(huì)立即停止 */
       -webkit-overflow-scrolling: auto;
   }
   

   這個(gè)屬性還可以解決以下問(wèn)題

   • 滾動(dòng)中 scrollTop 屬性不會(huì)變化
   • 手勢(shì)可穿過(guò)其他元素觸發(fā)元素滾動(dòng)
   • 滾動(dòng)時(shí)暫停其他 transition
   • pisition:fixed 抖動(dòng)問(wèn)題

   添加此屬性后，滾動(dòng)元素可能會(huì)發(fā)生卡頓現(xiàn)象，解決方法：將設(shè)置該元素的子元素高度+1，主動(dòng)觸發(fā)scrollbar

   .main-inner {
       min-height: calc(100% + 1px);
       /* min-height: 101%; */
   }
   

3. 時(shí)間報(bào)錯(cuò)

   -連接的時(shí)間字符串，ios端解析報(bào)錯(cuò)，轉(zhuǎn)變成/連接就行了?；蛘咄ㄟ^(guò)moment.js轉(zhuǎn)換（庫(kù)太大，不推薦）

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

4. 劉海屏兼容問(wèn)題

   • 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. 容器設(shè)置padding-top

            /* 首頁(yè)-頭部劉海屏兼容設(shè)置 */
            @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劉海屏兼容，可以通過(guò)constant/env獲取安全高度

     3. 另一種：設(shè)置固定值，375px寬

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

   • android

     安卓的處理一般通過(guò)jsbridge，就是調(diào)用原生方法，獲得該值。如果沒(méi)有，設(shè)個(gè)固定值，能兼容大部分機(jī)型

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

5. 文字行高偏上的問(wèn)題

   • 使用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}
   • 計(jì)算padding

   tips: 當(dāng)字體出現(xiàn)奇數(shù)、小數(shù)，安卓手機(jī)為避免奇數(shù)字體帶來(lái)的偏差會(huì)自動(dòng)設(shè)置成偶數(shù)。

參考文檔

1. -webkit-overflow-scrolling