js实现全屏

js实现全屏的方法

在JavaScript中，可以通过Element.requestFullscreen()方法实现全屏功能。现代浏览器普遍支持此API，但不同浏览器可能需要添加前缀。

// 触发全屏
function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { /* Safari */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { /* IE11 */
    element.msRequestFullscreen();
  }
}

退出全屏的方法

使用document.exitFullscreen()可以退出全屏模式，同样需要考虑浏览器兼容性。

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

检测全屏状态

通过document.fullscreenElement可以判断当前是否有元素处于全屏状态。

// 检查是否全屏
function isFullscreen() {
  return document.fullscreenElement || 
         document.webkitFullscreenElement || 
         document.msFullscreenElement;
}

全屏事件监听

可以监听fullscreenchange事件来响应全屏状态变化。

// 添加全屏状态变化监听
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
  if (isFullscreen()) {
    console.log('进入全屏');
  } else {
    console.log('退出全屏');
  }
}

样式调整建议

全屏模式下，CSS可以通过:fullscreen伪类为全屏元素添加特殊样式。

:-webkit-full-screen {
  background-color: white;
}
:-ms-fullscreen {
  background-color: white;
}
:fullscreen {
  background-color: white;
}

注意事项

某些浏览器要求全屏操作必须由用户手势触发（如点击事件），不能直接通过脚本自动执行。iOS Safari对全屏API的支持有限，可能需要使用特定于WebKit的API。

全屏API通常只能作用于单个元素，常见做法是将整个document.documentElement作为全屏目标。在移动设备上，全屏行为可能与桌面浏览器不同，建议进行真机测试。