如何实现移动端网页自动加载时进入全屏模式

你提到的谷歌地图移动端效果，不是使用标准的Fullscreen API（该API会隐藏系统状态栏），而是通过PWA（渐进式Web应用）的独立窗口模式配合视口、样式配置实现的——网页占据整个屏幕空间，系统状态栏叠加显示在网页上方。以下是具体实现步骤：

1. 核心区别：Fullscreen API vs 目标效果 #

• 标准requestFullscreen()会强制隐藏系统状态栏、导航栏等所有系统UI，和谷歌地图的效果不符。
• 谷歌地图的效果是让网页以「类原生App独立窗口」的形式运行，仅隐藏浏览器的地址栏、工具栏，保留系统状态栏，同时网页内容铺满屏幕。

2. 实现步骤 #

第一步：配置Web App Manifest #

创建manifest.json文件，放在网站根目录，让浏览器识别你的网页为PWA，支持添加到主屏幕并以独立窗口打开：

{
  "name": "你的应用名称",
  "short_name": "短名称",
  "display": "standalone", // 核心配置：启用独立窗口模式，隐藏浏览器UI
  "start_url": "/",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

在HTML头部引入该文件：

<link rel="manifest" href="/manifest.json">

第二步：配置视口与状态栏适配Meta标签 #

添加以下meta标签，确保网页适配移动端屏幕，并允许内容延伸到状态栏下方：

<!-- 适配移动端视口，允许内容覆盖整个屏幕区域 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<!-- 针对Chrome安卓，启用Web App模式 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- 针对iOS Safari，启用Web App模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- iOS状态栏设置为半透明，让网页内容可以延伸到下方 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

第三步：用CSS避免内容被状态栏遮挡 #

因为网页内容会延伸到状态栏下方，需要给页面顶部内容添加安全区域内边距，防止被状态栏遮挡：

body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  /* 使用系统提供的安全区域变量，自动获取状态栏高度 */
  padding-top: env(safe-area-inset-top);
}

3. 关于你遇到的JS全屏问题 #

标准Fullscreen API的触发有严格限制：必须由真实的用户手势触发（比如点击按钮、触摸屏幕的明确交互），confirm()弹窗的交互并不被浏览器认可为有效用户手势，所以无法触发全屏。

而上面的PWA方案不需要JS触发：用户将网页添加到主屏幕后，再次打开就会自动进入「保留状态栏的全屏」模式。如果想提示用户添加到主屏幕，可以监听beforeinstallprompt事件，但该事件的提示弹窗也需要用户主动交互（比如点击按钮）才能触发。

内容的提问来源于stack exchange，提问作者Simon Ferndriger