如何用JavaScript区分树莓派4的双扩展屏幕以渲染不同UI？

1. 基于Web API的屏幕坐标区分法 #

window.screen.isExtended只能判断是否多屏，但可以利用屏幕的坐标属性区分不同屏幕——双屏扩展模式下，系统会给每个屏幕分配唯一的坐标区域（即使分辨率、尺寸完全相同）。比如主屏幕通常是left:0, top:0，副屏幕会是left:1920, top:0（以1080p为例），可以通过坐标组合作为屏幕标识。

示例代码：

// 获取当前窗口所在屏幕的唯一标识
function getScreenId() {
  return `${screen.left},${screen.top}`;
}

// 根据标识渲染对应UI
const currentScreenId = getScreenId();
if (currentScreenId === '0,0') {
  renderMainUI(); // 主屏幕UI渲染逻辑
} else if (currentScreenId === '1920,0') {
  renderSecondaryUI(); // 副屏幕UI渲染逻辑
}

2. 结合系统EDID信息的唯一标识法 #

每个显示器的EDID数据包含唯一序列号，可以通过树莓派系统命令读取，再传递给前端作为区分依据：

• 先安装工具：sudo apt install edid-decode
• 读取双屏EDID：分别执行edid-decode /sys/class/drm/card0-HDMI-A-1/edid和edid-decode /sys/class/drm/card0-HDMI-A-2/edid，提取输出中的Serial Number字段
• 后端用Python/Node.js脚本实时检测当前窗口所在屏幕的EDID，通过AJAX或WebSocket传递给前端，前端根据唯一序列号渲染对应UI

3. Electron屏幕API方案（替代Node Webkit） #

如果能接受用Electron构建应用，它提供的screen模块可以直接获取屏幕的唯一ID、EDID、坐标等详细信息，无需依赖系统命令：

示例代码：

const { screen } = require('electron');

// 获取所有连接屏幕的信息
const allDisplays = screen.getAllDisplays();

// 监听窗口所在屏幕变化，切换UI
win.on('move', () => {
  const currentDisplay = screen.getDisplayMatching(win.getBounds());
  if (currentDisplay.id === allDisplays[0].id) {
    // 切换主屏幕UI
  } else {
    // 切换副屏幕UI
  }
});

关键注意事项 #

• 必须先在树莓派系统设置中把双屏配置为扩展桌面模式，镜像模式下两个屏幕坐标完全一致，无法区分
• EDID方案需要确保用户权限足够读取/sys/class/drm/下的文件

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