移动端“全屏”需正确配置viewport meta标签并结合PWA：width=device-width与initial-scale=1.0必须共存，user-scalable=no在iOS 10+无效；真全屏依赖apple-mobile-web-app-capable（iOS需添加到主屏幕）或manifest.json中display: standalone + service worker（Android Chrome 76+）。
viewport meta 标签必须写对，否则全屏只是幻觉
移动端所谓“全屏”，本质是让页面宽度匹配设备视口、禁用缩放、隐藏地址栏——但浏览器不会自动这么做，得靠 <meta name="viewport"> 显式声明。漏掉关键参数或写错值，页面照样会缩放、滚动、留白。
-
width=device-width是基础，不写就按桌面默认宽度（通常 980px）渲染，内容被强行压缩 -
initial-scale=1.0必须配width=device-width才生效；单独写它没用 -
user-scalable=no能禁缩放，但 iOS Safari 10+ 已忽略该值（出于可访问性考虑），别依赖它实现“全屏感” - 不要加
maximum-scale=1.0或minimum-scale=1.0—— 它们在部分 Android 浏览器里反而触发意外缩放或布局抖动
iOS Safari 的状态栏和 URL 栏隐藏靠的是 viewport + 真实全屏行为
仅靠 meta 标签无法真正隐藏 Safari 地址栏；它需要用户滚动后才收起。但你可以通过 viewport 设置提升“沉浸感”，再配合 apple-mobile-web-app-capable 触发 PWA 全屏模式。
- 加
<meta name="apple-mobile-web-app-capable" content="yes">，并搭配<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">（仅对 standalone 模式生效） - 必须将网页添加到主屏幕（Safari → 分享 → “添加到主屏幕”），否则
apple-mobile-web-app-capable不起作用 -
black-translucent会让状态栏半透明叠加在内容上，需预留顶部安全区（用env(safe-area-inset-top)或constant(safe-area-inset-top)）
安卓 Chrome 的全屏体验更依赖 manifest.json，meta 标签只是辅助
Chrome for Android 自 76 版本起，只响应符合 PWA 标准的配置：service worker + manifest.json + 正确的 viewport。光靠 meta 标签，哪怕写得再全，也进不了真全屏。
- manifest.json 中必须包含
"display": "standalone"或"display": "fullscreen" - 必须注册 service worker（哪怕空文件），否则 Chrome 拒绝启用全屏模式
-
<meta name="mobile-web-app-capable" content="yes">是旧版 Android 支持项，现在基本可省略 - 注意：Android 上
viewport中的height=device-height无意义，浏览器不支持，写了反而可能干扰渲染
真全屏的边界：软键盘弹出会强制退出，且无法绕过
无论 iOS 还是 Android，只要用户点击 <input> 或 <textarea>，系统软键盘弹出时，浏览器会立即退出全屏/standalone 模式，回到带地址栏的普通视图——这是系统级限制，JS 无法拦截或阻止。
立即学习“前端免费学习笔记（深入）”；
- 别试图用
screen.orientation.lock("landscape")或document.documentElement.requestFullscreen()强行维持，它们在 Web App Context 下多数无效 - 若业务强依赖全屏输入（如扫码填单），建议改用原生 WebView 封装，或接受软键盘触发的视图切换
- 测试时务必在真机上验证：模拟器常忽略软键盘行为，导致误判“已全屏”
