原来老项目是vue2+electron的,做的是适配的1920*1080屏幕,包括开发时候里面用到的像素大多都是px,现在因为项目需要,需要整到大分辨率下的屏幕取演示,导致项目页面瞬间就小了一半,非常的迷你
但是时间又紧急,一个个改px或者改BrowserWindow的窗口大小是不现实的,搜遍网上又暂时没找到好的方法,所以只能自己想想了
然后想到electron的本质不就相当于把一个浏览器装进一个壳子里吗?那相当于这个项目是具备浏览器的特性的,那我就把你项目刚开始运行的时候就把比例全部缩放变大不就行了吗!
所以我就在App.vue的mounted加了几行:
<template>
<div class="window-main">
<router-view></router-view>
</div>
</template>
<script>
const {
ipcRenderer
} = require('electron')
export default {
name: 'app',
components: {},
mounted() {
// 设置放大1.5倍,
// 1.5我是根据自己实际来的,目前我感觉这个比例放到3840*2160是够的
// 1000时间可置为0,取值1000是为了看下是否缩放的变化的
setTimeout(function(){
document.getElementsByTagName('body')[0].style.zoom = 1.5;
},1000);
},
}
</script>
<style>
</style>
如此,大功告成,成功适配,还有写细节调整微不足道了,已经够应付了。
如果是希望以后兼容所有屏幕分辨率的小伙伴,可以写个获取当前设备屏幕分辨率的方法,不同分辨率设置不同缩放比例就行,最起码比要一个个取改px好太多了!