客户端尺寸对设备的自适应解决方案

实现逻辑主要参照飞书，工作中主用Lark，感谢开发团队

需求说明

设计图稿尺寸 1280 * 720
由于屏幕缩放和少部分较差屏幕的影响，导致设备尺寸可能会比设计图稿小
需要保证客户端在小屏幕下正常使用

解决方案说明

当设备尺寸大于等于设计尺寸，理想情况，按照设计展示
当设备尺寸小于设计的最小尺寸时，将客户端的尺寸设置为设备尺寸
在小屏幕设备打开软件时可以自动设置尺寸
在改变缩放比例时可以实时响应
高度不足时可以滚动
宽度不足时，忽略不管

代码逻辑

import { BrowserWindow, Rectangle, screen, ipcMain, IpcMainEvent } from 'electron'


export interface MainWindowSize {
  width: number
  height: number
  minWidth: number
  minHeight: number
}

  // 主动改变窗口尺寸
  ipcMain.on(MAIN_WINDOW_SET_SIZE, (_event: IpcMainEvent, args: MainWindowSize) => {
    // getPrimaryDisplay获取主显示屏幕
    const primaryDisplay = screen.getPrimaryDisplay()
    setTargetMainWindowSize(args)
    // workArea 为除去系统功能条之外的可用尺寸
    setAppSize(mainWindow, args, primaryDisplay.workArea)
  })
  
  // 监控设备屏幕尺寸变化
  export const fitScreenSize = (mainWindow: BrowserWindow) => {
    screen.on('display-metrics-changed', (event, display, changedMetrics) => {
      setAppSize(mainWindow, targetMainWindowSize, display.workArea)
    })
  }
  
  let targetMainWindowSize = {
      width: 0,
      height: 0,
      minWidth: 0,
      minHeight: 0
   }

    export const setTargetMainWindowSize = (windowSize: MainWindowSize) => {
      targetMainWindowSize = windowSize
    }

    export const setAppSize = (mainWindow: BrowserWindow, targetSize: MainWindowSize, workArea: Rectangle) => {
      const { width: workAreaWidth, height: workAreaHeight } = workArea
      const { width: targetWidth, height: targetHeight, minWidth: targetMinWidth, minHeight: targetMinHeight } = targetSize

      const minWidth = workAreaWidth < targetMinWidth ? workAreaWidth : targetMinWidth
      const minHeight = workAreaHeight < targetMinHeight ? workAreaHeight : targetMinHeight
      const width = targetWidth > minWidth ? minWidth : targetWidth
      const height = targetHeight > minHeight ? minHeight : targetHeight

      mainWindow.setMinimumSize(minWidth, minHeight)
      mainWindow.setBounds({
        width,
        height
      })
    }

原谅内容简短，说明较少