Electron 设置zoomFactor让布局在任何设备上效果相同

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

_鸿博_

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

阅读量6.9k

点赞数 1

文章标签： html electron

本文链接：https://blog.csdn.net/redbo/article/details/56106442

版权

在不同的设备上（分辨率、长宽比不同），同一个html的显示效果会不同，如何让他们相同呢？（不涉及Html的自适应布局）
在使用Bootstrap(自适应宽度的情况下), 我找到了一个公式来计算合适的zoomFactor来实现不同设备上完全的效果相同（比如windows笔记本、mac等）
在任意js文件里（被html引用的），加入以下代码：

var devInnerHeight = 658.0; //开发时的InnerHeight
var devDevicePixelRatio = 1.5; //开发时的devicepixelratio
var devScaleFactor = 1.5; //开发时的ScaleFactor
var scaleFactor = require('electron').screen.getPrimaryDisplay().scaleFactor;
var zoomFactor = window.innerHeight / devInnerHeight * window.devicePixelRatio / devDevicePixelRatio * devScaleFactor / scaleFactor;
require('electron').webFrame.setZoomFactor(factor);