多屏展示需通过独立窗口协同管理，浏览器无原生跨屏api，window.open()配合显示器坐标定位是兼容方案，但chrome 91+需启用参数；electron因提供screen.getalldisplays()等能力成为更可靠的多屏分发选择。
多屏展示不是靠一个 HTML 文件自动适配所有屏幕，而是需要明确控制每个屏幕的渲染目标——本质是多个独立窗口或多个显示器区域的协同管理，浏览器本身不提供跨屏布局 API，得靠组合策略实现。
用 window.open() 打开独立全屏窗口并绑定显示器
这是最可控、兼容性最好的方案：每个屏幕对应一个独立 window 实例，通过 screenLeft/screenTop（Chromium 系）或 moveTo() + resizeTo() 手动定位到指定显示器区域。注意 Chrome 91+ 后默认禁用跨屏 window.open() 的位置控制，需手动启用：
- 启动 Chrome 时加参数：
--unsafely-treat-insecure-origin-as-secure="http://localhost:8080" --user-data-dir=/tmp/chrome-test --window-position=0,0 --window-size=1920,1080 - 页面中调用：
window.open('screen1.html', '_blank', 'left=0,top=0,width=1920,height=1080,menubar=no,toolbar=no,location=no,status=no') - 多显示器下，
left=0不一定对应主屏左上角——实际坐标系以系统主显示器为原点，副屏坐标可能是负值（如左屏left=-1920）或大正值（如右屏left=1920），需先查screen.availLeft等属性校准
用 screen.orientation 和 screen.width/height 做基础适配判断
这些属性只反映当前窗口所在屏幕的能力，不能跨屏读取其他显示器信息。常见误用是以为 screen.width 能拿到“所有屏幕总宽”——它只是当前窗口所在屏的可用宽度。
-
screen.width≠ 多屏拼接宽度，仅等于当前窗口所在显示器的availWidth -
screen.orientation.type可监听横竖屏切换，但仅对当前窗口生效，无法触发其他窗口同步旋转 - 若需响应式内容分发（比如主屏显示控制面板、副屏显示实时图表），必须由主窗口主动
postMessage通知子窗口更新状态
Electron 或 Tauri 是真正多屏分发的务实选择
纯浏览器环境无法可靠枚举、定位、独占多显示器，而 Electron 提供了完整的 screen.getAllDisplays() 和 BrowserWindow 的 screen 选项：
const { screen, BrowserWindow } = require('electron')
const displays = screen.getAllDisplays()
const win1 = new BrowserWindow({
x: displays[0].bounds.x,
y: displays[0].bounds.y,
width: displays[0].bounds.width,
height: displays[0].bounds.height,
fullscreen: true,
show: true
})
const win2 = new BrowserWindow({
x: displays[1].bounds.x,
y: displays[1].bounds.y,
width: displays[1].bounds.width,
height: displays[1].bounds.height,
fullscreen: true,
show: true
})
- 无需用户手动拖拽，启动即按物理显示器边界精准铺满
- 支持
display-metrics-changed事件监听显示器插拔，动态增删窗口 - Web 技术栈不变，但运行时脱离浏览器沙箱限制
别碰 requestFullscreen() + CSS @media (display-mode: fullscreen) 想法
这个组合只能让单个页面全屏，且全屏后仍局限在当前窗口所在的显示器内，不会自动跳转或复制到其他屏。更关键的是：requestFullscreen() 被用户拒绝后无法重试，且移动端行为完全不可控。
-
document.fullscreenElement为 null 时，fullscreenchange事件也不会触发回调 - CSS
@media查询无法区分“哪个显示器”，只反映当前文档是否处于全屏模式 - 试图用
transform: scale()模拟跨屏拉伸会导致像素模糊、滚动错乱，且无法解决输入焦点和鼠标坐标偏移问题
真正的多屏展示，核心不在 HTML 结构或 CSS 媒体查询，而在运行时对显示器拓扑的感知与窗口生命周期的精确控制——浏览器做不到的，就交给 Electron；想绕过权限限制硬搞，大概率卡在 Blocked opening 'xxx' in a new window because the request was made in an insecure context. 这类错误里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
