Screen.isExtended、getScreenDetails与多显示器开发
内容提要
本文介绍Window Management API，用于判断多显示器及精准控制窗口位置。`screen.isExtended`可简单判断是否多屏，`getScreenDetails()`则获取详细屏幕信息，但需用户授权。该API支持多屏窗口布局、全屏等操作，但兼容性有限，仅Chrome支持，应用前景受限。
延伸解读
权限与兼容性限制
getScreenDetails() 需要用户授权，且必须在用户交互中调用，否则会抛出异常。若用户拒绝，则返回 NotAllowedError。此外，该 API 目前仅 Chrome 100+ 支持，Firefox 和 Safari 均未实现，因此生产环境使用需谨慎评估兼容性。
多屏窗口定位的改进
传统 window.open() 只能基于主屏幕定位，无法精确控制辅助屏幕上的窗口位置。getScreenDetails() 提供各屏幕的 availLeft、availTop 等属性，可精准计算窗口坐标，实现跨屏布局，如平铺或全屏显示，弥补了旧方法的不足。
应用场景与前景
作者认为该 API 因权限流程繁琐，应用前景有限，仅适合特定场景，如新窗口支付弹框自动关闭。但 screen.isExtended 属性简单实用，未来可能更常用。目前受兼容性限制，难以在生产环境广泛部署。
Q&A
如何用JavaScript判断用户是否使用多显示器？
可以使用`screen.isExtended`属性，如果为`true`则表示用户拥有多显示器。也可以使用`window.getScreenDetails()`方法，通过返回的`screens`数组长度大于1来判断。
`screen.isExtended`和`getScreenDetails()`有什么区别？
`screen.isExtended`只能判断是否多显示器，而`getScreenDetails()`可以获取所有屏幕的详细信息，如位置、尺寸等，但需要用户授权。如果只需判断是否多屏，用`isExtended`更简单。
`getScreenDetails()`方法使用时需要注意什么？
必须在用户交互（如点击事件）中调用，否则会抛出异常。首次调用会弹出权限申请提示，如果用户拒绝，会返回`NotAllowedError`错误。
如何利用Window Management API将窗口精准定位到指定显示器？
通过`getScreenDetails()`获取所有屏幕的`ScreenDetailed`对象，利用其`availLeft`、`availTop`、`availWidth`、`availHeight`属性计算窗口位置和大小，然后使用`window.open()`或`window.moveTo()`进行定位。
`ScreenDetails`对象有哪些属性和事件？
`ScreenDetails`对象有两个属性：`currentscreen`（当前屏幕的详细信息）和`screens`（所有屏幕的数组）。有两个事件：`currentscreenchange`（当前屏幕变化时触发）和`screenschange`（屏幕连接或断开时触发）。
`ScreenDetailed`对象包含哪些关键信息？
包含屏幕的位置和尺寸信息，如`left`、`top`、`availLeft`、`availTop`、`availWidth`、`availHeight`，以及`devicePixelRatio`（设备像素比）、`isInternal`（是否内置屏幕）、`isPrimary`（是否主屏幕）和`label`（屏幕名称）等。
Window Management API的浏览器兼容性如何？
目前仅Chrome 100及以上版本支持，Firefox和Safari均不支持，因此生产环境使用受限。
Window Management API有哪些实际应用场景？
可用于多显示器环境下的窗口布局管理，例如在指定屏幕打开窗口、全屏显示、精准定位等。但受限于权限申请和兼容性，目前更适合特殊交互场景，如新窗口支付弹框。
