上一篇
可通过CSS实现：设置
html, body { width:100%; height:100%; margin:0; padding:0; }，并重置所有元素的内外边距为0，使
基础概念解析
全屏显示的本质是通过CSS控制元素占据整个可视区域（Viewport），同时隐藏默认的浏览器UI组件（如地址栏、书签栏），根据实现目标可分为两类：
- 伪全屏：仅拉伸页面至视窗大小，仍保留浏览器控件；
- 真全屏：通过浏览器内置API完全隐藏界面，需用户主动触发。
核心实现方案
方案1：CSS基础布局法（推荐）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/ 重置根元素尺寸 /
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; / 禁止滚动条 /
}
/ 内容容器样式 /
#fullscreen-container {
width: 100%;
height: 100%;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
</head>
<body>
<div id="fullscreen-container">我是全屏内容</div>
</body>
</html>
关键代码解读：
| 属性 | 作用 | 必要性 |
|———————|——————————-|——–|
| margin: 0; padding: 0; | 消除默认边距 | ⭐️⭐️⭐️ |
| width: 100%; height: 100%; | 占满视窗 | ⭐️⭐️⭐️ |
| overflow: hidden; | 隐藏滚动条 | ⭐️⭐️⭐️ |
| <meta name="viewport"> | 移动端适配（防止缩放） | ⭐️⭐️⭐️ |
优势：无需JavaScript，兼容性强；
局限：无法移除浏览器地址栏等原生控件。
方案2：JavaScript Fullscreen API（真全屏）
// 获取目标元素
const element = document.documentElement;
// 请求全屏
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox旧版
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { // Chrome/Safari
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE11+
element.msRequestFullscreen();
}
// 退出全屏监听
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
console.log('已退出全屏');
}
});
执行流程：
- 检测浏览器前缀方法 → 2. 调用对应API → 3. 监听
fullscreenchange事件管理状态。
典型应用场景：视频播放器、在线游戏、数据可视化大屏。
多方案对比表
| 实现方式 | 特点 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| CSS基础布局 | 纯样式控制，无交互逻辑 | 简单高效，兼容性好 | 无法隐藏浏览器控件 | 普通页面、静态展示 |
| JavaScript API | 调用浏览器原生接口 | 真正全屏，体验最佳 | 需处理兼容问题 | 多媒体应用、复杂交互 |
| Meta Tag + CSS | 结合移动端视口配置 | 自适应设备尺寸 | 依赖设备方向锁定 | 移动端网页、H5应用 |
| Frameset/Iframe | 嵌入框架实现局部全屏 | 隔离主页面环境 | 已被HTML5废弃 | 遗留系统维护 |
关键注意事项
-
移动端特殊处理：
- 添加
<meta name="viewport" content="user-scalable=no">禁止缩放； - 考虑横竖屏切换时的布局重构；
- iOS Safari要求必须通过触摸事件触发全屏。
- 添加
-
浏览器兼容性陷阱：
- Internet Explorer使用
msRequestFullscreen()； - Firefox早期版本需
mozRequestFullScreen()； - Safari/Chrome统一为
requestFullscreen()。
溢出解决方案：/ 强制内容不超出边界 / img, video, canvas { max-width: 100%; object-fit: contain; / 保持比例缩放 / }
- Internet Explorer使用
-
安全限制：
- 现代浏览器要求全屏操作必须由用户手势（点击/触摸）触发；
- 弹出窗口无法直接调用全屏API。
常见错误排查
-
现象1：设置了
height:100%但仍有空白间隙
原因：父级元素未设置height:100%，形成链式缺失。
解决：逐级向上为html→body→容器设置高度。 -
现象2：全屏后出现滚动条
原因实际高度超过视窗高度。
解决：使用overflow:hidden或动态计算内容尺寸。 -
现象3：iOS设备无效
原因：苹果限制非用户手势触发的全屏。
解决：绑定touchstart事件后调用API。
相关问答FAQs
Q1: 为什么设置了width:100%; height:100%还是没有全屏？
A：这是典型的层级传递问题，请检查以下三点：
- 确保
html和body都设置了height:100%； - 中间父级元素不能有固定高度；
- 如果使用flex/grid布局，确认主轴方向正确。
示例修正代码：
html { height:100%; }
body { min-height:100%; margin:0; }
.container { height:100%; }
Q2: 如何通过按钮实现可切换的全屏功能？
A：结合JavaScript事件监听实现：
<button onclick="toggleFullscreen()">切换全屏</button>
<script>
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
</script>
注意：退出全屏只能通过exitFullscreen()方法，键盘ESC键
