iPhone Safari主屏幕多页网站子页面无法全屏，如何实现始终全屏？
2026-5-9
解决iPhone主屏幕Web App子页面失去全屏的问题
我之前也碰到过一模一样的情况——之前好好的全屏Web App，删了重新添加后主屏幕打开没问题，一跳转子页面就弹出Safari的工具栏，简直头疼！结合我踩过的坑，给你几个靠谱的排查和修复步骤：
检查Web App Manifest的核心配置
现在iOS主要靠manifest.json来识别Web App的全屏属性，你得确保里面这几个关键项没写错：{ "name": "你的应用全名", "short_name": "应用短名", "display": "standalone", // 必须设为standalone或fullscreen，这是全屏的核心 "start_url": "/", // 要和你添加主屏幕时的起始URL完全一致，比如如果是从/page1加的就写"/page1" "scope": "/", // 划重点！这个指定了应用的作用范围，所有子路由必须在这个范围内才会保持全屏，根路径就写"/" "icons": [ // 别忘了加符合iOS要求的图标，比如180x180的PNG，否则可能影响识别 { "src": "/icon-180.png", "sizes": "180x180", "type": "image/png" } ] }尤其是
scope，如果你的子页面是/page这种根路径下的，一定要设为"/"，不然iOS会把这些子页面当成外部链接，直接跳Safari。补全iOS专属的Meta标签
虽然Manifest是标准，但iOS有时候还是认旧的meta标签，所有页面的<head>里都要加上这些：<!-- 开启iOS全屏模式 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 配置状态栏样式，可选black/default/black-translucent --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置主屏幕上的应用名称 --> <meta name="apple-mobile-web-app-title" content="你的应用名称"> <!-- 防止系统自动识别号码跳转 --> <meta name="format-detection" content="telephone=no">其中
apple-mobile-web-app-capable设为yes是必须的，少了这个iOS根本不会把你的网站当成可全屏的Web App。修正内部链接的跳转方式
有时候即使配置全对，错误的链接跳转也会触发Safari：- 内部路由不要用
target="_blank"，这个会强制在Safari打开 - 如果是单页应用，确保用客户端路由跳转（比如React Router的
navigate、Vue Router的push），不要用普通的<a>标签直接跳（除非是同域且在scope内的路径）
- 内部路由不要用
清空缓存并重新添加主屏幕
你之前删过应用，大概率是Safari缓存了旧的配置，导致新的Manifest没生效，按这个步骤来：- 打开Safari，访问你的网站
- 点击底部的分享按钮，选择「清除历史记录与网站数据」
- 完全关闭Safari，重启你的iPhone
- 重新打开Safari，访问网站，再次点击「添加到主屏幕」
确认网站是HTTPS环境
iOS对Web App有强制HTTPS要求（除了本地localhost调试），如果你的网站还是HTTP的，赶紧换成HTTPS，不然全屏模式根本无法正常工作。
按这几步排查下来，应该就能恢复子页面的全屏效果了——我当时就是缓存的问题，清完缓存重新加就好了！
内容的提问来源于stack exchange，提问作者Vladimir Mikhaylovskiy
