<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);
}
},
Vue large screen adaptive
Guess you like
Origin blog.csdn.net/weixin_44692055/article/details/129570567
Recommended
Ranking