electron-vue打包后样式变大以及不同分辨率屏幕适配问题

最新推荐文章于 2024-09-20 12:49:08 发布

时雨大人

最新推荐文章于 2024-09-20 12:49:08 发布

阅读量9.3k

点赞数 2

分类专栏：前端+移动开发

本文链接：https://blog.csdn.net/Zx_SSSS/article/details/82286503

版权

背景

公司产品中的桌面程序部分,我选用的是electron-vue的技术方案,最近功能开发完了,npm run build 打包之后发现界面的样式和npm run dev调试时候样式不一样,整体偏大一些,装到另一台电脑,发现差别更大了,怀疑是屏幕分辨率适配的问题,试了一下,果然如此,解决方案很简单,先读取电脑屏幕的系统分辨率,然后做一下缩放适配,这样在不同的电脑上显示效果都一样了.

处理方案

在man.js中引入如下代码

var devInnerHeight = 1080.0 // 开发时的InnerHeight
var devDevicePixelRatio = 1.0// 开发时的devicepixelratio
var devScaleFactor = 1.3 // 开发时的ScaleFactor
var scaleFactor = require('electron').screen.getPrimaryDisplay().scaleFactor