HTML本身无法实现全屏，需用JavaScript的requestFullscreen()方法（用户手势触发）配合:fullscreen伪类控制样式，调用返回Promise需捕获错误，退出靠fullscreenchange事件和document.fullscreenElement判断。
全屏显示不是靠设置页面尺寸实现的
浏览器里没有“设置 index.html 页面尺寸”这个操作。所谓“全屏”，实际是两种不同场景：一种是让网页内容撑满整个视口（viewport），另一种是调用浏览器全屏 API 进入原生全屏模式。前者靠 CSS 控制，后者需 JavaScript 触发且受用户交互限制。
height: 100vh 和 height: 100% 的区别必须分清
100vh 是视口高度的 100%，不管父元素如何；100% 是相对于父元素高度计算的，如果父元素没设高度，它就塌陷为 0。想让一个容器真正占满屏幕，通常得从根节点一路设高：
- 确保
html和body没有默认 margin，且高度设为100%或100vh - 目标容器（比如
<main>）用height: 100vh最直接，或用min-height: 100vh防止内容超长时被截断 - 避免对
body直接设overflow: hidden，否则滚动条消失，长页面会丢失可滚动性
调用 requestFullscreen() 前必须满足用户手势条件
现代浏览器禁止脚本自动进入全屏，必须由用户点击、触摸等明确交互触发。常见错误包括：
- 在
pageLoad或setTimeout里直接调用document.documentElement.requestFullscreen()→ 报错Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture - 绑定在非交互元素（如
<div>）上且没加tabindex和role="button"→ 键盘用户无法触发 - 未处理兼容前缀（虽然现在主流浏览器已统一支持标准 API，但旧版 Chrome/Safari 曾用
webkitRequestFullscreen）
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('fullscreen-btn').addEventListener('click', () => {
document.documentElement.requestFullscreen().catch(e => {
console.warn('Fullscreen request rejected:', e);
});
});
移动端适配容易忽略 viewport meta 和缩放行为
即使写了 height: 100vh，iOS Safari 在地址栏收起/展开时会动态改变 vh 值，导致布局跳动。这不是 bug，而是设计行为。解决思路有限：
- 优先用
min-height: 100vh+height: auto组合，避免强制拉伸 - 避免依赖
vh做精确定位（比如弹窗居中），改用position: fixed+top: 50%+transform: translateY(-50%) - 务必在
<head>中声明：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则双击缩放或横屏时布局可能失控
真要“全屏显示”，先想清楚是要视觉填充、沉浸浏览，还是需要系统级全屏控制——这两者的技术路径完全不同，混用只会增加调试成本。
