HTML全屏功能实现汇总

一、原生Fullscreen API实现

<!-- HTML结构 -->
<button onclick="toggleFullscreen()">切换全屏</button>
<div id="content">需要全屏的内容</div><script>
// 进入全屏
function enterFullscreen(element) {if (element.requestFullscreen) {element.requestFullscreen();} else if (element.webkitRequestFullscreen) { /* Safari */element.webkitRequestFullscreen();} else if (element.msRequestFullscreen) { /* IE11 */element.msRequestFullscreen();}
}// 退出全屏
function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitExitFullscreen) { /* Safari */document.webkitExitFullscreen();} else if (document.msExitFullscreen) { /* IE11 */document.msExitFullscreen();}
}// 切换全屏状态
function toggleFullscreen() {const elem = document.getElementById("content");if (!document.fullscreenElement) {enterFullscreen(elem);} else {exitFullscreen();}
}// 监听全屏状态变化
document.addEventListener("fullscreenchange", handleFullscreenChange);
document.addEventListener("webkitfullscreenchange", handleFullscreenChange); // Safarifunction handleFullscreenChange() {console.log(document.fullscreenElement ? "进入全屏" : "退出全屏");
}
</script>

---

二、CSS样式适配

/* 全屏模式下的样式调整 */
#content:fullscreen {width: 100vw;height: 100vh;background: white;
}/* 浏览器前缀兼容 */
#content:-webkit-full-screen { /* Safari/Chrome */width: 100vw;height: 100vh;
}#content:-moz-full-screen { /* Firefox */background: #f0f0f0;
}

---

三、关键注意事项

1. 用户交互要求：必须通过点击等用户行为触发（安全限制）
2. 元素选择：通常全屏针对特定容器（如<div>），而非整个页面
3. 错误处理：

try {element.requestFullscreen();
} catch (err) {console.error("全屏失败:", err);
}

---

四、浏览器兼容性

浏览器	支持版本	前缀要求
Chrome	15+	webkit (旧版)
Firefox	9+	moz
Safari	5.1+	webkit
Edge	12+	ms
Opera	12.1+	o

---

五、扩展应用场景

1. 视频播放器全屏：

const video = document.querySelector("video");
video.addEventListener("dblclick", () => {video.requestFullscreen();
});

2. 全屏键盘控制：

document.addEventListener("keydown", (e) => {if (e.key === "Escape") exitFullscreen();
});

---

六、推荐工具库

• screenfull.js（跨浏览器封装）：

import screenfull from 'screenfull';if (screenfull.isEnabled) {screenfull.request(document.getElementById('content'));
}

---

七、调试技巧

1. 使用F12开发者工具的Toggle device toolbar模拟移动端
2. 通过document.fullscreenElement实时检查全屏状态
3. 注意Safari对第三方iframe的全屏限制

建议优先使用原生API实现基础功能，复杂场景再考虑引入封装库。