各种屏幕尺寸获取

以下获取的尺寸都是当前屏幕分辨率，及屏幕缩放百分比下的尺寸

屏幕尺寸，浏览器屏幕可显示区域尺寸

    const {width:sw,availWidth:saw,height:sh,availHeight:sah} = window.screen

浏览器大小，视口，左右距离

const {
    screenLeft:sl,//浏览器距离屏幕左边距离
    screenTop:st,//浏览器距离屏幕顶部距离
    innerWidth:iw,//浏览器视口宽度
    innerHeight:ih,//浏览器视口高度
    outerWidth:ow,//浏览器窗口的宽度
    outerHeight:oh,//浏览器窗口的高度
    devicePixelRatio:zoom//屏幕分辨率的缩放程度
} = window

window.devicePixelRatio = 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比

踩坑

• 浏览器全屏时，outerWidth != screen.width，1920*1080，devicePixelRatio = 1，sw - ow = 16，16为浏览器预留滚动条位置，虽然全屏时看不见，但它就是有。

• devicePixelRatio 不同时，sw - ow 的值会变化，我在项目中实测使用如下

    // 根据屏幕分辨率的缩放比，获取sw-ow的差值
    getDvalue(devicePixelRatio){
        let z = 0;
        switch(devicePixelRatio){
            case 1:
                z = 16;
                break;
            case 1.25:
                z = 14;
                break;
            case 1.5:
                z = 14;
                break;
            case 1.75:
                z = 14;
                break;
            case 2:
                z = 12;
                break;
            case 2.25:
                z = 12;
                break;
            case 2.5:
                z = 12;
                break;
            case 3:
                z = 12;
                break;
        }
        return z
    },

• 浏览器最大化，screenLeft === 0, screenTop === 0

• 浏览器全屏时，screenLeft != 0, screenTop != 0

总结

• 这个位置调试给我干了几天，差点祭天

• 收获Element.getBoundingClientRect()，见MDN