Vue大屏自适应_vue页面自适应屏幕大小

<div class="scale-box" :style="{ transform: `scale(${scaleX},${scaleY}) translate(-50%, -50%)` }" ></div>   
   // 这是包裹元素 最外层的   利用 css3 动画属性  transform   整体页面进行  缩放缩小
  <style>
 .scale-box {
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    overflow: hidden;
}
</style>
 
mounted() {
this.styleScale()
},
    methods: {
  styleScale(){
      let that = this;
      console.log(111111)
      window.addEventListener('resize', this.setScale);
      window.addEventListener('keydown', function(e) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 122) {
            //捕捉F11键盘动作
            e.preventDefault(); //阻止F11默认动作
            var el = document.documentElement;
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; //定义不同浏览器的全屏API //执行全屏
            if (typeof rfs != 'undefined' && rfs) {
                rfs.call(el);
            } else if (typeof window.ActiveXObject != 'undefined') {
                var wscript = new ActiveXObject('WScript.Shell');
                if (wscript != null) {
                    wscript.SendKeys('{F11}');
                }
            }
            const weListenScreen = function() {
                if (document.webkitIsFullScreen) {
                    // console.log(1)
                    that.flag = true; //  全屏
                    console.log(that.flag, '全屏');
                    that.setScale();
                } else {
                    that.flag = false; //  不全屏
                    console.log(that.flag, '不全屏');
                    that.setScale();
                    // console.log(2)
                    document.addEventListener('webkitfullscreenchange', weListenScreen);
                }
            };
            document.addEventListener('webkitfullscreenchange', weListenScreen, false);
        }
      });
      this.flag = false;
      this.setScale();
  },
 getScale() {
    // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
    let ww = window.innerWidth / 1920;
    let wh = window.innerHeight / 1080;
    return ww < wh ? ww : wh;
 },
  setScale() {
    
    var ratio = 0,
        screen = window.screen,
        ua = navigator.userAgent.toLowerCase();
    if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
    } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
    }
    if (ratio) {
        ratio = Math.round(ratio * 100); //  计算浏览器百分比缩放
    }
    console.log(ratio)
    if (this.flag) {
        this.scaleX = this.getScale();
        this.scaleY = this.getScale();
        console.log(this.flag, 1);
    } else {   //  根据屏幕大小自适应  适应任何屏幕  但是会留黑边   只有在F11 全屏下 才能铺满屏幕
        console.log(this.flag, 2);
        this.scaleX = this.getScale();
        this.scaleY = this.getScale();
        return
        
        // 下面这个根据  屏幕大小自定缩放比例 能占满全屏       不是F11 全屏状态下 会有压缩 圆形会变形
        switch (window.screen.availWidth) {
            case 1920:
                switch (ratio) {
                    case 175:
                        this.scaleX = 0.575;
                        this.scaleY = 0.49537;
                        break;
                    case 150:
                        this.scaleX = 0.67;
                        this.scaleY = 0.578704;
                        break;
                    case 125:
                        this.scaleX = 0.799999;
                        this.scaleY = 0.694444;
                        break;
                    case 110:
                        this.scaleX = 0.91;
                        this.scaleY = 0.788889;
                        break;
                    case 100:
                        this.scaleX = 1;
                        this.scaleY = 0.867593;
                        break;
                    case 90:
                        this.scaleX = 1.1111;
                        this.scaleY = 0.963889;
                        break;
                    case 80:
                        this.scaleX = 1.24999;
                        this.scaleY = 1.08426;
                        break;
                    case 75:
                        this.scaleX = 1.33333;
                        this.scaleY = 1.15648;
                        break;
                    default:
                        this.scaleX = this.getScale();
                        this.scaleY = this.getScale();
                }
                break;
                case 1366:
                    switch (ratio) {
                        case 175:
                            this.scaleX = 0.575;
                            this.scaleY = 0.49537;
                            break;
                        case 150:
                            this.scaleX = 0.4744;
                            this.scaleY = 0.386111;
                            break;
                        case 125:
                            this.scaleX = 0.57;
                            this.scaleY = 0.462963;
                            break;
                        case 110:
                            this.scaleX = 0.648;
                            this.scaleY = 0.525926;
                            break;
                        case 100:
                            this.scaleX = 0.712;
                            this.scaleY = 0.5898704;
                            break;
                        case 90:
                            this.scaleX = 0.791;
                            this.scaleY = 0.642593;
                            break;
                        case 80:
                            this.scaleX = 0.89;
                            this.scaleY = 0.723148;
                            break;
                        case 75:
                            this.scaleX = 0.949;
                            this.scaleY = 0.771296;
                            break;
                        default:
                            this.scaleX = this.getScale();
                            this.scaleY = this.getScale();
                    }
                    break;
            case 1360:
                switch (ratio) {
                    case 175:
                        this.scaleX = 0.575;
                        this.scaleY = 0.49537;
                        break;
                    case 150:
                        this.scaleX = 0.4744;
                        this.scaleY = 0.386111;
                        break;
                    case 125:
                        this.scaleX = 0.57;
                        this.scaleY = 0.462963;
                        break;
                    case 110:
                        this.scaleX = 0.648;
                        this.scaleY = 0.525926;
                        break;
                    case 100:
                        this.scaleX = 0.712;
                        this.scaleY = 0.5898704;
                        break;
                    case 90:
                        this.scaleX = 0.791;
                        this.scaleY = 0.642593;
                        break;
                    case 80:
                        this.scaleX = 0.89;
                        this.scaleY = 0.723148;
                        break;
                    case 75:
                        this.scaleX = 0.949;
                        this.scaleY = 0.771296;
                        break;
                    default:
                        this.scaleX = this.getScale();
                        this.scaleY = this.getScale();
                }
                break;
                default:   //  按着 1680 分辨率调的
                switch (ratio) {    
                    case 175:
                        this.scaleX = 0.50;
                        this.scaleY = 0.47537;
                        break;
                    case 150:
                        this.scaleX = 0.58144;
                        this.scaleY = 0.5386111;
                        break;
                    case 125:
                        this.scaleX = 0.6948;
                        this.scaleY = 0.6648;
                        break;
                    case 110:
                        this.scaleX = 0.7948;
                        this.scaleY = 0.7725926;
                        break;
                    case 100:
                        this.scaleX = 0.872;
                        this.scaleY = 0.81987;
                        break;
                    case 90:
                        this.scaleX = 0.9691;
                        this.scaleY = 0.942593;
                        break;
                    case 80:
                        this.scaleX = 1.0911;
                        this.scaleY = 1.02923148;
                        break;
                    case 75:
                        this.scaleX = 1.162911;
                        this.scaleY = 1.0911;
                        break;
                    default:
                        this.scaleX = this.getScale();
                        this.scaleY = this.getScale();
                }
        }
    }
 
    // console.log(ratio);
 }
   },