山东网站建设哪家有天津网站建设定制公司
多屏使用场景：例如1屏显示录入操作界面，2屏显示SOP。或者每个屏上显示不同的看板内容等
废话不少说，直接上代码：将下面的代码复制到txt记事本里，保存为html格式即可本地观看效果
<!DOCTYPE html>
<html>
<body><button onclick="initDualScreen()">启动双屏模式</button><div id="screen1" class="screen"></div><div id="screen2" class="screen"></div><script>async function initDualScreen() {// 1. 请求多屏幕权限const permission = await window.getScreenDetails();if (permission.screens.length < 2) {alert('未检测到第二块屏幕！');return;}// 2. 获取屏幕信息const [primaryScreen, secondaryScreen] = permission.screens;// 3. 主窗口占据第一屏幕window.moveTo(primaryScreen.left, primaryScreen.top);window.resizeTo(primaryScreen.width, primaryScreen.height);// 4. 创建副窗口并定位到第二屏幕const features = `noopener=yes,left=${secondaryScreen.left},top=${secondaryScreen.top},width=${secondaryScreen.width},height=${secondaryScreen.height}`;const secondWindow = window.open('', '_blank', features);// 5. 内容分发document.getElementById('screen1').innerHTML =`<h1>主屏幕内容 (${secondaryScreen.width}x${primaryScreen.height})</h1>`;secondWindow.document.body.innerHTML = `<style>body { margin:0; background:#f0f0f0; }.screen { padding:20px; }</style><div class="screen"><h1>扩展屏幕内容 (${secondaryScreen.width}x${secondaryScreen.height})</h1></div> `;}</script><style>.screen {width: 100vw;height: 100vh;padding: 20px;background: linear-gradient(45deg, #e0f2fe, #bae6fd);}</style>
</body>
</html>上面的代码如果发布到服务器，如果使用http部署是无法使用的，只有https部署才能正常使用。
http部署有安全限制，需要单独设置
Chrome设置如下
--no-sandbox --test-type --unsafely-treat-insecure-origin-as-secure=域名
例如：
--no-sandbox --test-type --unsafely-treat-insecure-origin-as-secure=http://192.168.1.100
在桌面快捷方式添加即可
关闭所有窗口，重新打开即可（注意，部分人打开还是没有生效）
打开还没有生效的可以通过下面方式查看chrome://version
如果没有要从任务管理器里手动结束Chrome
Edge设置方法如下图
设置后要重启浏览器，最终效果如下
多屏显示