Electronでzoomがうまく動かない?

JavaScript

electronではwindowに対してsetZoomFactorやsetZoomLevelを指定することで拡大、縮小ができます。私はアプリケーションのデフォルト拡大率を変更しようとして微妙に詰まったので書き残します。

mainWindow = new BrowserWindow(option);
mainWindow.webContents.setZoomFactor(2);

上のようにsetZoomFactorに2を渡すと拡大率は200%で表示されます。
これに合わせてWindowSizeも

mainWindow.setContentSize(windowWidth * 倍率, windowHeight * 倍率);

を渡せば簡単に動くと思ったら、拡大率が思うように変化しません。
最初は動いたような気もしたのですが、途中から拡大率を変えても画面上ではなにも変更されませんでした。

Chromeの挙動を考えるにブラウザ側がページ毎の拡大率を覚えていて、windowを作成直後に値を入れてもページロードでブラウザキャッシュに上書きされているんじゃないでしょうか?

解決方法としてはブラウザ側で読み込みが終わってからsetZoomFactorで値を上書きするのが良いと思います。

// index.js

document.addEventListener('DOMContentLoaded', function() {
    window.api.invoke('setWindowSize', {zoom: 1.5});
}

// main.js

ipcMain.handle("setWindowSize", (event, args) => {
    mainWindow.webContents.setZoomFactor(args.zoom);
    mainWindow.setContentSize(mainWindowWidth * zoom, mainWindowHeight * zoom);
});

WindowSizeに関してはアプリ起動時のみしか変更しない場合、new BrowserWindow()する際に拡大しておく方が良いと思います。
動的に変更するのであれば上記のようにまとめた方が管理しやすいと思います。

コメント