Kahoot如何检测Chromebook特殊全屏模式？无fullscreenelement时的实现

你遇到的是ChromeOS独有的沉浸式浏览模式——它不是通过标准全屏API（requestFullscreen()）触发的，所以不会产生document.fullscreenElement，但Kahoot可以通过以下几种网页端可实现的方式检测到该状态：

• 视口与屏幕尺寸的差值校验
  这种模式下，window.innerHeight会无限接近screen.height，但和标准全屏不同，会存在几像素的微小差值（因为顶部栏是悬浮覆盖而非彻底移除）。通过计算两者的比值，当结果接近1但不等于1，且document.fullscreenElement为null时，即可判定处于该模式。

• Chrome专属DOM类检测
  Chrome在进入该模式时，会给根元素（document.documentElement）添加特定的类名（比如chrome-immersive-mode，不同Chrome版本可能有细微差异）。Kahoot可以通过检查这个类的存在来识别状态：

  if (document.documentElement.classList.contains('chrome-immersive-mode') && !document.fullscreenElement) {
    // 判定为ChromeOS特殊沉浸式模式
  }
  

• 视觉视口API（window.visualViewport）判断
  利用视觉视口的高度值，对比屏幕原生高度。在该模式下，visualViewport.height会填充几乎整个屏幕，但不会像标准全屏那样完全匹配，结合fullscreenElement为null的条件，就能区分开两种全屏状态。

• ChromeOS设备的UA特征匹配
  先通过User-Agent字符串识别当前设备为ChromeOS，再结合视口尺寸的异常变化（突然接近屏幕高度但未触发标准全屏），综合判断进入了该特殊模式。

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