在开发时为了保证窗口内的页面和窗口保持一样的大小,我们会这样配置
width: 100vw;
height: 100vh;
border: 1px solid #2D8CF0;
background-color: white;
box-sizing: border-box;
我们设置了1px
的边框,但是这样有的电脑能正常显示边框有的又不行,到底是什么原因呢?
经过反复测试发现,原来是系统缩放导致的。
我们当然可以把缩放调成100%来解决,但是我们不能要求用户这样做,那我们就必须要知道是什么导致的?
我们先了解一个知识点
在使用小数点时,会存在一些浏览器解析差异的问题:
.container{
width:10.9px;
}
IE8 中会显示当前的宽度为11px
,而在 IE7 会以10px
进行显示;
所以对于小数点的使用不同浏览器会存在不同的解析方式:
那么我们就知道了 Electron用的是Chrome的内核,那么如果系统设置为125%
,那么所有的宽高计算都要乘以1.25,这样经过四舍五入之后就可能导致宽高大于窗口宽高的问题。怎么解决呢?
有两个方式
软件自身禁止缩放
主进程中添加以下代码
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的倍数即可