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

背景

公司产品中的桌面程序部分,我选用的是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
var zoomFactor = (window.innerHeight / devInnerHeight) * (window.devicePixelRatio / devDevicePixelRatio) * (devScaleFactor / scaleFactor)
require('electron').webFrame.setZoomFactor(zoomFactor)

简单解释一下, zoomFactor就是缩放比例了,你把devInnerHeight设置成你开发时设置的electron窗体分辨率的height,(比如我用的1921 * 1080),然后调节devScaleFactor达到自己想要的效果即可

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

maven资源过滤导致打包后文件变大
今天遇到一个问题,我们有个ip.dat二进制文件,通过里面内容可以解析ip所在的地域信息,本地单元测试都是OK的,部署到测试环境后,发现解析ip的时候报错.拿测试环境打印出的IP地址,在本地单元测试也 ...
elementui 样式渲染的慢_解决vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序 ...
vue打包后element-ui部分样式（图标）异常问题
vue打包后element-ui部分样式(图标)异常问题参考文章: (1)vue打包后element-ui部分样式(图标)异常问题 (2)https://www.cnblogs.com/ljwsyt ...
vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...
解决用word修改博客后字体变大的问题
我平时喜欢用Word写Blog,但当用它打开已经发布的文章时,会将默认字体变成小四,再次发布后字体变大不少.例如,我最初的文章是: <p>Hello 123</p> 当用Wor ...
优化vue打包chunk-vendors.js 过大
vue打包的时候chunk-vendors.js文件很大,导致首次加载页面比较慢: 首先: 1.安装compression-webpack-plugin npm install --save-dev ...
flask 渲染 vue 打包后的dist文件（直接用后端渲染）
flask 渲染 vue 打包后的dist文件(直接用后端渲染) vue项目打包出dist文件 npm run build 代码 from flask import Flask from flask ...
vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
[vue] 怎么修改vue打包后生成文件路径？
[vue] 怎么修改vue打包后生成文件路径? webpack:output.path vue-cli3: outputDir 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...

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

背景

处理方案

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

最新文章

热门文章