判断当前页面是否以「添加到主屏幕」应用形态启动 （快捷方式\APP、套壳包等启动）

张开发
• 2026/4/14 2:24:10 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

判断当前页面是否以「添加到主屏幕」应用形态启动 （快捷方式\APP、套壳包等启动）
这里写自定义目录标题判断当前页面是否以「添加到主屏幕」应用形态启动判断当前页面是否以「添加到主屏幕」应用形态启动/** * 判断当前页面是否以「添加到主屏幕」应用形态启动 * - iOS Safari: navigator.standalone * - 标准 PWA: display-mode 为 standalone/fullscreen/minimal-ui */importstorefrom/storeexportfunctionisLaunchedFromHomeScreen(){// 检查 window 对象是否存在if(typeofwindowundefined)returnfalse// iOS 设备// 当用户将网页“添加到主屏幕”并从桌面图标启动时navigator.standalone 的值为 true。// 如果是在普通 Safari 浏览器中访问该值为 false 或 undefined。// 如果 isIosStandalone 为真说明是在 iOS 设备上以 PWA 模式启动constnavwindow.navigator||{}constisIosStandaloneBoolean(nav.standalone)// 自己的特定业务逻辑: 比如套壳包。 也认为是主屏幕启动constisClientShellstore.state.app.clientTypeshell-h5// 标准 PWA / Android 设备的判断使用媒体查询检测“显示模式”// 标准 PWA: display-mode 为 standalone/fullscreen/minimal-ui// supportsMatchMedia 检查浏览器是否支持 matchMedia APIconstsupportsMatchMediatypeofwindow.matchMediafunctionconstisStandaloneDisplayModesupportsMatchMedia// display-mode: standalone表示应用以独立窗口运行(window.matchMedia((display-mode: standalone)).matches||// 全屏模式。window.matchMedia((display-mode: fullscreen)).matches||// 极简 UI 模式window.matchMedia((display-mode: minimal-ui)).matches)// 只要满足以上任意一个条件就认为是主屏幕启动returnisIosStandalone||isStandaloneDisplayMode||isClientShell}

更多文章