HTML网页全屏需按场景组合配置：视觉撑满用viewport+CSS（100dvh/overflow:hidden）；iOS Web App全屏需apple-mobile-web-app-capable=yes+HTTPS+主屏幕启动；原生全屏须JS手势触发且iOS仅支持video/iframe；数据大屏需JS动态缩放适配。
HTML 网页全屏显示不能靠单个“配置项”一劳永逸，而是需组合多个关键配置，按目标场景区分：是视觉上撑满屏幕（如数据大屏）、启动为独立 Web App（iOS 添加到主屏幕后无地址栏），还是用户点击触发浏览器原生全屏（Fullscreen API）。三者机制不同，混淆会导致失效。
视觉撑满：CSS + viewport 基础配置
这是最常用、也最容易出错的“伪全屏”。核心是消除默认边距、滚动条和缩放干扰：
- 在
<head>中必须加正确 viewport 标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
漏掉或写错（如等号前后空格、引号内换行）会导致 Safari 忽略整条声明 - CSS 中重置根级尺寸：
html, body { margin: 0; padding: 0; width: 100vw; height: 100dvh; overflow: hidden; }
优先用100dvh（动态视口高），比100vh更稳定；iOS Safari 对100vh计算常出错 - 避免内容溢出：子元素若设固定宽高或未约束，仍会触发滚动条，务必配合
overflow: hidden和box-sizing: border-box
iOS Web App 全屏：添加到主屏幕才生效
这不是“自动全屏”，而是让用户从主屏幕图标启动后，隐藏 Safari 地址栏与底栏。关键配置只有 1 个有效标签：
-
<meta name="apple-mobile-web-app-capable" content="yes">—— 这是唯一被 iOS Safari 识别的开关，apple-touch-fullscreen是无效标签，完全不被 WebKit 支持 - 必须搭配 HTTPS（iOS 11.3+ 强制要求）
- 必须在 Safari 中手动执行「分享 → 添加到主屏幕」，然后从桌面图标点击打开；在 Safari 标签页里刷新，
window.navigator.standalone永远为false - iPhone X 及更新机型需补充：
<meta name="viewport" content="..., viewport-fit=cover">，并用 CSS 适配安全区，例如：padding-top: env(safe-area-inset-top);
用户点击触发原生全屏：JavaScript 驱动
适用于视频、图表、演示页等需要临时独占屏幕的场景，必须由用户手势触发：
立即学习“前端免费学习笔记（深入）”；
- 只能对页面中某个具体 DOM 元素调用（如
<div id="content">），不能对document.body或document.documentElement直接调用（多数浏览器拒绝） - 调用前需做兼容性封装：
el.requestFullscreen?.() || el.webkitRequestFullscreen?.() || el.msRequestFullscreen?.() - 退出需监听
fullscreenchange事件，并调用document.exitFullscreen?.()等对应方法 - iOS Safari 限制严格：仅支持
<video>或带allowfullscreen属性的<iframe>全屏；纯 HTML 内容在 iOS 上无法触发原生全屏，只能用 CSS 模拟
数据大屏等比自适应：JS 动态缩放
当设计稿为 1920×1080，但需在任意分辨率屏幕下“不变形填充”时，纯 CSS 不够用：
- 用 JS 计算缩放因子：
const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080); - 动态设置根字体大小：
document.documentElement.style.fontSize = scale * 80 + 'px';（假设 1rem = 80px） - 所有布局单位统一用
rem，配合overflow: hidden和居中容器，实现类似background-size: contain的效果 - 监听
resize事件实时更新，避免横竖屏切换后失真
