最大化状态Chrome为何将display-mode上报为fullscreen及新窗口检测问询

问题1答复 #

这是Chrome的已知实现漏洞，不符合W3C对display-mode的规范定义。按照规范，fullscreen模式仅指代页面通过JavaScript全屏API触发、隐藏所有浏览器原生UI（地址栏、标签栏、系统任务栏等）的状态，普通窗口最大化状态下浏览器UI依然存在，理应返回browser模式。该问题在Chrome内核浏览器中存在多年，至今未得到官方修复。

问题2答复 #

可以通过两层优化实现更稳定的检测，完全规避Chrome的误判问题：

1. 优先排除伪全屏场景：仅当document.fullscreenElement存在时，才判定为真实fullscreen模式，排除窗口最大化的误报
2. 新增Safari桌面PWA兼容属性navigator.standalone，覆盖iOS端PWA场景

优化后的检测代码如下：

// 检测是否为PWA独立运行模式（不支持打开新窗口）
function isStandalonePwa() {
  return window.matchMedia('(display-mode: standalone)').matches
    || window.navigator.standalone === true
}

// 规避Chrome误判的准确display-mode获取逻辑
function getCorrectDisplayMode() {
  // 仅API触发的真实全屏才算fullscreen
  if (document.fullscreenElement) return 'fullscreen'
  if (isStandalonePwa()) return 'standalone'
  // 其余所有场景统一按普通浏览器模式处理
  return 'browser'
}

如果仅需要判断target="_blank"是否能正常打开新窗口，还可以增加运行时兜底逻辑：调用window.open()后判断返回值是否为null，若为null说明弹出被拦截，降级为当前窗口跳转即可。

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