Electron宽高渲染问题（边框显示不全的解决方法）

发表于 | 分类于
Electron宽高渲染问题（边框显示不全的解决方法）

前言

在开发时为了保证窗口内的页面和窗口保持一样的大小，我们会这样配置

1
2
3
4
5
width: 100vw;
height: 100vh;
border: 1px solid #2D8CF0;
background-color: white;
box-sizing: border-box;

我们设置了1px的边框,但是这样有的电脑能正常显示边框有的又不行，到底是什么原因呢？

经过反复测试发现，原来是系统缩放导致的。

image-20210915114509599

我们当然可以把缩放调成100%来解决，但是我们不能要求用户这样做，那我们就必须要知道是什么导致的？

浏览器解析小数的方式

我们先了解一个知识点

在使用小数点时，会存在一些浏览器解析差异的问题：

1
2
3
.container{  
    width:10.9px;
}

IE8 中会显示当前的宽度为11px，而在 IE7 会以10px进行显示；
所以对于小数点的使用不同浏览器会存在不同的解析方式：

  1. 采用四舍五入解析的浏览器：IE8、IE9、Chrome、Firefox
  2. 采用直接取整解析的浏览器：IE7、Safari

解决方法

那么我们就知道了 Electron用的是Chrome的内核，那么如果系统设置为125%,那么所有的宽高计算都要乘以1.25，这样经过四舍五入之后就可能导致宽高大于窗口宽高的问题。怎么解决呢？

有两个方式

  1. 软件自身禁止缩放
  2. 调整窗口宽高保证计算结果为整数

软件自身禁止缩放

主进程中添加以下代码

1
2
3
4
if (process.platform === 'win32') {
    app.commandLine.appendSwitch('high-dpi-support', 'true')
    app.commandLine.appendSwitch('force-device-scale-factor', '1')
}

但是这样在高分辨率的屏幕上窗口就太小了，体验不好。

调整宽高的值

所以我们还是调整一下窗口的大小保证计算的结果为整数

先看看系统中常见的缩放比例100%、125%、150%、175%、200%、225%、250%、300%

除去整数只剩下1.25、1.5、1.75、2.25、2.5，也就是说保证0.25、0.5、0.75相乘为整数即可，所以只要宽高是4的倍数就可以了。

结论

宽高设置为4的倍数即可

BUG

目前发现的如果宽高大于系统的宽高时，窗口无法显示。还没找到原因，不知道是不是Electron的BUG。