js如何检测当前页面是否以全屏模式显示？

你可以使用 JavaScript 检测页面是否处于全屏模式，主要通过检查 document.fullscreenElement (标准 API) 或特定厂商前缀的属性。

以下是一个兼容多种浏览器的函数：

function isFullscreen() {
  return !!(
    document.fullscreenElement || // 标准API
    document.webkitFullscreenElement || // Chrome, Safari and Opera
    document.mozFullScreenElement || // Firefox
    document.msFullscreenElement // IE/Edge
  );
}

// 使用示例
if (isFullscreen()) {
  console.log("页面处于全屏模式");
} else {
  console.log("页面未处于全屏模式");
}


// 监听全屏状态变化
document.addEventListener('fullscreenchange', (event) => {
  if (isFullscreen()) {
    console.log('进入全屏');
  } else {
    console.log('退出全屏');
  }
});

// 其他浏览器特定的事件：
// webkitfullscreenchange (Chrome, Safari and Opera)
// mozfullscreenchange (Firefox)
// MSFullscreenChange (IE/Edge)

// 你也可以根据需要监听这些特定的事件.

解释:

• document.fullscreenElement: 这是标准的全屏 API，如果页面处于全屏模式，则此属性返回当前处于全屏模式的元素。如果页面不处于全屏模式，则此属性返回 null。

• 厂商前缀: 由于历史原因，一些旧版浏览器使用带有厂商前缀的属性，例如 webkitFullscreenElement、mozFullScreenElement 和 msFullscreenElement。为了兼容性，我们需要检查这些属性。

• !!: 双重否定操作符 !! 将任何值转换为布尔值。如果值为 null，则 !!null 为 false。如果值为任何其他对象（包括 DOM 元素），则 !!(DOM 元素) 为 true。

• fullscreenchange 事件: 这个事件在全屏状态改变时触发，可以用来监听用户进入或退出全屏模式。 同样，为了兼容性，需要考虑带有厂商前缀的事件名称。

使用方法:

你可以将 isFullscreen() 函数添加到你的 JavaScript 代码中，并在需要时调用它来检查页面是否处于全屏模式。 你还可以使用 fullscreenchange 事件来响应全屏状态的变化。

这个方法提供了一个可靠的跨浏览器解决方案，可以检测页面是否处于全屏模式。 记住根据需要添加特定浏览器的前缀事件监听器，以便在所有浏览器中都能正常工作。