2019前端筆記

  1. 采用局部滾動布局，不要給body和html添加overflow:hidden，因為android系統(tǒng)下，focus input框時，會出現(xiàn)鍵盤彈起遮住input框的bug。 此條有誤，只有全局滾動才可以避免此類問題發(fā)生

  2. iOS下采用-webkit-overflow-scrolling開啟局部彈性滾動布局，盡量不要在局部滾動內(nèi)部采用:active偽類樣式，當(dāng):active偽類和iOS特有的慣性滾動一起觸發(fā)時，頁面會閃爍

  3. 無法在iOS12微信瀏覽器內(nèi)，通過historyAPI修改即將復(fù)制出去的鏈接，但安卓可以。

  4. iOS8 支持css3 animtion動畫，但不支持animation回調(diào)

  5. android下監(jiān)聽鍵盤彈起收回事件，支持屏幕旋轉(zhuǎn)

    let h = window.innerHeight;
let orientation = window.orientation;
if (os.isAndroid) {
    window.addEventListener('resize', () => {
        let height = window.innerHeight;
        if (orientation === window.orientation && height < h) {
            window.dispatchEvent(new CustomEvent('keyboardshow'));
            return;
        }
        if (orientation === window.orientation && height === h) {
            window.dispatchEvent(new CustomEvent('keyboardhide'));
            return;
        }
        if (orientation !== window.orientation) {
            h = height;
            orientation = window.orientation;
            window.dispatchEvent(new CustomEvent('keyboardhide'));
        }
    });
}

  6. css針對iOS或andorid采用不同樣式：

    /*android 4.44以下、iOS環(huán)境*/
div{border:0.5px solid #fff}
@supports not (-webkit-overflow-scrolling:touch){
      /*android 4.44以上的環(huán)境*/
     div{border:none;box-shadow:0 0 0 0.5px #fff}
}

    supports支持程度為iOS 8+,android 4.44+，可根據(jù)需求靈活調(diào)整語法。

  7. 移動端可以使用vh和vw這兩個單位，根據(jù)mdn文檔，vh等于1%初始視口高度，vw為1%初始視口寬度，但在safari中，使用這個“初始視口高度”包含了頂部的地址欄和底部的導(dǎo)航欄。因此不能在safari中使用100vh當(dāng)成全屏高度使用。

  8. 解決安卓line-height設(shè)置后文字不居中的辦法（android 7.0+）：

    • 第一步，給html設(shè)置語言，指定中文：<html lang="zh_cn">
    • 第二步，使用中文字體進行渲染：html{font-family:sans-serif}

  9. 一個數(shù)字轉(zhuǎn)成對應(yīng)的rgba顏色值:

    function n2rgba(n){
     if(i>0xffffffff)return [0xff,0xff,0xff,1];
     const str = ('00000000'+n.toString(16)).slice(-8);
     return [
         parseInt(`0x${str.slice(0,2)}`),
         parseInt(`0x${str.slice(2,4)}`),
         parseInt(`0x${str.slice(4,6)}`),
         parseInt(`0x${str.slice(6,8)}`)/0xff,
     ]
}

//采用位運算
function n2rgba(n){
    return [
        (n & 0xff000000)>>>24,
        (n & 0xff0000)>>>16,
        (n & 0xff00)>>>8,
        (n & 0xff)/0xff    
    ]
}

  10. 一個rgba顏色值轉(zhuǎn)成數(shù)字（a最大值為255）

    function rgba2n(r,g,b,a){
    const toHex=(n)=>('00'+n.toString(16)).slice(-2)
    return parseInt(
        '0x' +toHex(r) + toHex(g)+ toHex(b) + toHex(a)
    );
}

//采用運算
function rgba2n(r,g,b,a){
   return [r,g,b,a].reduce((n,item,i)=>{
       item = Math.abs(item);
       if(item>=0xff){
           item = 0xff
       }
       n += item*Math.pow(16,(3-i)*2)
       return n
   },0)
}

  11. 在canvas中繪制iconfont圖標(biāo)：

    var ctx = canvas.getContext('2d');

//可以隨意設(shè)置顏色
ctx.fillStyle='#f00'

//iconfont對應(yīng)導(dǎo)出的字體名稱
ctx.font='24px iconfont'

//'\ue508'對應(yīng)相應(yīng)圖標(biāo)的字體編碼
ctx.fillText('\ue508',0,0);

  12. webpack4+less+MiniCssExtractPlugin打包后公共less代碼提取不出來？試試使用@import (reference) '<你的公共less或者主題less文件>';代替@import '<你的公共less或者主題less文件>';

  13. 莫名其妙，ios safari里，視口外的css3 animation動畫初始化時不執(zhí)行，除非你給animation-delay加個延時，而且這個延時還不能太小，另外，通過使用setTimeout給他加延時的話，也是可以的

  14. chrome里面，想要獲取輸入光標(biāo)的包圍盒直接調(diào)用range.getBoundingClientRect()就可以了，而在safari ios里面，如果當(dāng)前的光標(biāo)range的collapsed狀態(tài)為true，則獲取到的值都是0。但可以通過range.getClientRects()獲取到光標(biāo)包圍盒：

    function getRangeBoundingClientRect(){
    let selection = window.getSelection();
    let defaultValue = {top:0,left:0/*...and so on*/}//默認(rèn)返回       
    if(!selection.rangeCount){
        return defaultValue
    }
    let range = selection.getRangeAt(0);
    if(!range){
        return defaultValue
    }
    let rangeBcrList = range.getClientRects();
    if(!rangeBcrList.length){
        return defaultValue
    }
    return rangeBcrList[0]
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容