js 实现全屏
使用 requestFullscreen 方法
通过调用元素的 requestFullscreen 方法可以实现全屏。该方法兼容现代浏览器，但不同浏览器可能需要前缀。
const element = document.documentElement; // 全屏整个页面
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Safari
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE11
element.msRequestFullscreen();
}监听全屏状态变化
全屏状态变化时会触发 fullscreenchange 事件，可以通过监听该事件来执行相应操作。
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
document.addEventListener('MSFullscreenChange', handleFullscreenChange); // IE11
function handleFullscreenChange() {
if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
}退出全屏
使用 exitFullscreen 方法可以退出全屏模式，同样需要考虑浏览器兼容性。
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Safari
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE11
document.msExitFullscreen();
}检查当前全屏状态
通过 fullscreenElement 属性可以检查当前是否有元素处于全屏状态。
const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
if (fullscreenElement) {
console.log('当前全屏元素:', fullscreenElement);
} else {
console.log('未处于全屏状态');
}全屏样式调整
全屏模式下，CSS 伪类 :fullscreen 可以用于调整全屏元素的样式。
:fullscreen {
background-color: white;
}
:-webkit-full-screen {
background-color: white;
}
:-ms-fullscreen {
background-color: white;
}兼容性注意事项
不同浏览器对全屏 API 的实现存在差异，建议在实际使用时检测各浏览器前缀以确保兼容性。现代浏览器已逐步标准化，但旧版本可能需要前缀支持。
