Chrome/Edge浏览器使用多屏完美解决方案，http部署使用https部署的功能-EW帮帮网

多屏使用场景：例如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

在桌面快捷方式添加即可