# Electron Window Auto Scale By Monitor(in web URL)

繼上一篇 [Electron Window Auto Scale By Monitor](https://hackmd.io/@nick-huang-1996/SkPAzqzVkx) 回顧之前遺留下在 dev 端的 side effect（無法跟產品端一樣在不同解析度螢幕下做個別縮放），想花點時間研究一下能不能同時也在 dev 端達到一樣的效果。

function initWinUrl(win: BrowserWindow, url: string) {
  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    win.loadURL(`${process.env['ELECTRON_RENDERER_URL']}${url}`)
  } else {
    win.loadFile(join(__dirname, `../{url}`))
  }
}

## 問題
- 在目前 **win.loadURL** 下同domain關係，無法區別各頁面的縮放; 只會統一縮放所有相關頁面。舉例：當某些視窗移到螢幕B時，原本還在A螢幕的其他視窗也會間接受到拖曳至螢幕B關係，跟著縮放變形。

## 解決
- 經過長時間通靈，我們只要使用 electron 的 session 去定義出每個 window 把他們給各自獨立出來，就能區隔每個 window 縮放。

const { app, BrowserWindow, session } = require('electron');

app.whenReady().then(() => {
    const session1 = session.fromPartition('persist:session1');
    const session2 = session.fromPartition('persist:session2');

    // 建立 window1，使用 session1
    const win1 = new BrowserWindow({
        webPreferences: { session: session1 }
    });
    win1.loadURL('https://example.com');
    win1.webContents.setZoomFactor(1.5); // 只影響 win1

    // 建立 window2，使用 session2
    const win2 = new BrowserWindow({
        webPreferences: { session: session2 }
    });
    win2.loadURL('https://example.com');
    win2.webContents.setZoomFactor(1.0); // 只影響 win2
});