<div class="scale-box" :style="{ transform: `scale(${scaleX},${scaleY}) translate(-50%, -50%)` }" ></div>
// 這是包裹元素 最外層的 利用 css3 動(dòng)畫屬性 transform 整體頁面進(jìn)行 縮放縮小
<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鍵盤動(dòng)作
e.preventDefault(); //阻止F11默認(rèn)動(dòng)作
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; //定義不同瀏覽器的全屏API //執(zhí)行全屏
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的寬高比，計(jì)算出最合適的縮放比，寬高比可根據(jù)需要自行更改
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); // 計(jì)算瀏覽器百分比縮放
}
console.log(ratio)
if (this.flag) {
this.scaleX = this.getScale();
this.scaleY = this.getScale();
console.log(this.flag, 1);
} else { // 根據(jù)屏幕大小自適應(yīng) 適應(yīng)任何屏幕 但是會(huì)留黑邊 只有在F11 全屏下 才能鋪滿屏幕
console.log(this.flag, 2);
this.scaleX = this.getScale();
this.scaleY = this.getScale();
return
// 下面這個(gè)根據(jù) 屏幕大小自定縮放比例 能占滿全屏 不是F11 全屏狀態(tài)下 會(huì)有壓縮 圓形會(huì)變形
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 分辨率調(diào)的
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 大屏自適應(yīng)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- Vue大屏項(xiàng)目自適應(yīng)--響應(yīng)式盒子 一、獲取當(dāng)前瀏覽器可視窗口寬高 1、在Vue項(xiàng)目 src文件夾內(nèi)新建 util...
- 描述 在實(shí)際業(yè)務(wù)中，我們常用圖表來做數(shù)據(jù)統(tǒng)計(jì)，數(shù)據(jù)展示，數(shù)據(jù)可視化等比較直觀的方式來達(dá)到一目了然的數(shù)據(jù)查看，但在大...
- 描述公司項(xiàng)目需要做數(shù)據(jù)大屏，自己連夜薅頭發(fā)搜索查詢出。目前可滿足需求的方案?？墒褂眠m用于多分辨率，移動(dòng)端亦可使用以...
- 配置前言 項(xiàng)目構(gòu)建：基于vue-cli3構(gòu)建，使用postcss-px2rem px2rem-loader進(jìn)行re...
- 數(shù)據(jù)可視化 將數(shù)據(jù)通過各種視覺通道映射成圖形，可以使得用戶更快、更準(zhǔn)確的理解數(shù)據(jù)。 大屏用途 用于公司展廳、日常經(jīng)...
