如何根据屏幕分辨率调整Electron应用宽高以适配不同显示设备

单独使用webPreferences提供的ZoomFactor实现适配效果不佳的核心原因：该参数仅对网页渲染层做等比缩放，不会自动同步适配不同屏幕的DPI密度、窗口物理尺寸，易出现内容模糊、点击热区偏移、布局错位的问题。

• 取数逻辑修正
  不要依赖网页侧的window.innerWidth/innerHeight获取屏幕尺寸，直接使用Electron内置的screen模块拉取原生系统级的显示参数，包括当前屏幕的workAreaSize（去除系统菜单栏、Dock栏后的可用工作区尺寸）、scaleFactor（系统原生DPI缩放值）、size（屏幕物理分辨率），这些值的准确性远高于网页侧API的返回结果，不会受浏览器插件、页面布局溢出的影响。
• 双维度适配逻辑（替代单参数ZoomFactor硬缩放）
  1. 先算窗口真实物理尺寸：以预先设定的默认窗口尺寸为设计基准，结合当前屏幕的可用工作区大小做比例匹配——比如13/14寸笔记本的可用工作区通常偏小，就将窗口物理尺寸设为可用区的70%_{80%，保证窗口不会超出屏幕范围、被系统任务栏遮挡；iMac这类大尺寸高分辨率屏的可用工作区更宽松，就将窗口物理尺寸设为可用区的50%}60%，匹配大屏的视觉比例，不会因为窗口尺寸太小显得局促。
  2. 再动态匹配缩放系数：将计算得到的窗口实际物理尺寸和设计基准尺寸做比值，把这个动态计算的系数通过webContents.setZoomFactor()方法赋值，替代在webPreferences中写死固定值的方式。这种方式下的缩放系数和窗口实际尺寸完全绑定，不会出现内容溢出窗口、或者窗口留大量空白的问题。
• 动态更新的配套逻辑
  • 不要仅在应用启动时计算一次尺寸和缩放值，需要监听screen.on('display-metrics-changed')事件，当用户拖动窗口到不同分辨率的显示设备、或者调整系统DPI设置时，实时重新获取当前窗口所在屏幕的参数，重算窗口尺寸和对应的缩放系数。
  • 给缩放系数设置合理的上下限（比如0.7~1.2的区间），避免极端分辨率场景下内容缩放过度导致无法正常阅读操作。
• 高分屏模糊问题的配套处理
  不要单纯靠调高ZoomFactor解决Retina屏的内容发虚问题，需要在网页侧做矢量适配：所有元素尺寸优先使用rem等相对单位，配合构建工具将设计稿固定px值转为相对单位映射，保证缩放调整时矢量元素不会出现模糊，相比单纯缩放位图内容的显示效果更稳定。

内容的提问来源于stack exchange，提问作者Harsh Makwana