Electron 設定zoomFactor讓佈局在任何裝置上效果相同

玉發表於2019-04-01
OOM

在不同的裝置上（解析度、長寬比不同），同一個html的顯示效果會不同，如何讓他們相同呢？（不涉及Html的自適應佈局） 在使用Bootstrap(自適應寬度的情況下), 我找到了一個公式來計算合適的zoomFactor來實現不同裝置上完全的效果相同（比如windows筆記本、mac等） 在任意js檔案裡（被html引用的），加入以下程式碼：

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)複製程式碼


相關文章