上一篇
html 如何设置全屏显示
在 HTML 中，可通过 ` 配合 CSS body { width: 100vw; height: 100vh; margin: 0; }`
核心概念解析
全屏显示的本质是消除浏览器默认的UI元素（如地址栏、工具栏），使网页内容完全填充整个屏幕，根据触发时机可分为两类：
被动全屏：页面加载时自动铺满视窗；
主动全屏：通过用户操作（如点击按钮）动态切换至全屏状态。
两者均需结合CSS布局与JavaScript控制，但具体实现逻辑差异较大。
被动全屏实现方案
方案1：基础CSS布局法（推荐新手）
<!DOCTYPE html> <html> <head> <style> html, body { margin: 0; / 移除默认外边距 / padding: 0; / 移除默认内边距 / width: 100%; / 宽度占满视窗 / height: 100%; / 高度占满视窗 / overflow: hidden;/ 禁止滚动条出现 / } #content { background-color: #f0f0f0; / 示例背景色 / width: 100%; / 内容区宽度自适应 / height: 100%; / 内容区高度自适应 / } </style> </head> <body> <div id="content">我是全屏内容</div> </body> </html>
关键要点说明：
| 属性 | 作用 | 缺失后果 |
|—————|——————————-|————————|
| margin:0 | 消除body默认的8px外边距 | 右侧/底部出现空白 |
| overflow:hidden | 隐藏滚动条 | 内容溢出时产生滚动条 |
| height:100% | 确保子元素继承父级高度 | 内容区高度塌陷为0 |
局限性：此方案仅能实现视觉上的“伪全屏”，实际仍保留浏览器外壳，无法禁用快捷键（如F11）。
方案2：视口单位强化版
若需更精准控制,可将固定像素替换为视口单位：
#content { width: 100vw; / 视窗宽度 / height: 100vh; / 视窗高度 / }
优势：vw/vh单位基于视窗尺寸计算，可完美适配不同分辨率设备。
主动全屏实现方案（JavaScript API）
当需要动态切换全屏时,必须使用Fullscreen API，以下是完整实现流程：
HTML结构准备
<button id="fullscreen-btn">进入全屏</button> <div id="target-element">待全屏的内容区域</div>
JavaScript逻辑实现
document.getElementById('fullscreen-btn').addEventListener('click', () => { const element = document.getElementById('target-element'); if (!document.fullscreenElement) { // 当前未全屏 if (element.requestFullscreen) { // Chrome/Firefox/Edge element.requestFullscreen(); } else if (element.webkitRequestFullscreen) { // Safari element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } } else { // 当前已全屏 if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } });
重要注意事项
️ 同源策略限制：若页面通过file://协议打开，多数浏览器会阻止全屏请求；建议通过本地服务器运行。
️ 安全限制：部分浏览器要求全屏操作必须由用户直接触发（如click事件），禁止定时器自动触发。
️ 样式重置：进入全屏后，建议动态修改目标元素的样式以获得最佳效果：
element.addEventListener('fullscreenchange', () => { if (document.fullscreenElement === element) { element.style.backgroundColor = '#000'; } });
高级优化技巧
全屏状态检测与反馈
// 每帧检测全屏状态 function checkFullscreen() { const isFullscreen = document.fullscreenElement !== null; console.log(`当前全屏状态：${isFullscreen}`); requestAnimationFrame(checkFullscreen); } checkFullscreen();
多元素协同控制
若需同时控制多个元素全屏：
const elements = [elem1, elem2, elem3]; elements.forEach(el => el.requestFullscreen());
退出全屏后的善后处理
document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement) { console.log('已退出全屏模式'); // 恢复原始样式或执行其他清理操作 } });
常见错误排查表
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 点击按钮无反应 | 未绑定正确的事件监听器 | 检查元素ID是否匹配 |
| Safari浏览器失效 | 缺少webkit前缀 | 补充webkitRequestFullscreen |
| 安卓设备白屏 | 未处理横竖屏切换 | 监听orientationchange事件 |
相关问答FAQs
Q1: 为什么我设置了width:100%; height:100%却无法全屏？
A: 请检查以下三点：
- 父级链完整性：确保从html→body→父容器→目标元素的每一级都设置了height:100%，任一环节缺失会导致高度断裂。
- 盒模型影响：若使用了box-sizing: border-box;，需将padding/border计入总高度。
- 滚动条干扰：即使设置了overflow:hidden，仍需确认父级元素没有强制生成滚动条。
Q2: 如何在全屏模式下播放视频并隐藏控制条？
A: 两步实现：
- 使用<video>标签的controls属性设置为false：<video src="video.mp4" controls="false">
- 结合全屏API强制进入全屏：videoElement.requestFullscreen();
️ 注意：部分浏览器仍会显示极简控制条，可通过CSS覆盖层进一步隐藏。
通过以上方案,您可根据实际需求选择静态布局或动态交互方式实现全屏效果，建议优先测试目标浏览器的兼容性，必要时结合Polyfill
