Chrome 移动版最近添加了添加到主屏幕的功能，类似于 iOS。这很酷，但它的支持不如 iOS - 它不支持window.navigator.standalone，因此您无法检测您是否作为独立应用运行。
如何检测应用是否作为已安装应用运行？
你不能，直接。
注意它说的是“直接”。我的问题是我们可以间接吗？有没有一些棘手的方法可以做出有根据的猜测？
【问题讨论】：
标签： javascript android google-chrome mobile mobile-safari
iOS 和 Chrome WebApp 的行为不同，这就是我关注的原因：
isInWebAppiOS = (window.navigator.standalone === true);
isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);
【讨论】：
这个答案有很大的延迟，但我在这里发布它只是为了其他正在努力寻找解决方案的人。
最近 Google 已经实现了 CSS 条件 display-mode: standalone，因此有两种可能的方法来检测应用程序是否独立运行：
使用 CSS：
@media all and (display-mode: standalone) {
/* Here goes the CSS rules that will only apply if app is running standalone */
}
同时使用 CSS 和 Javascript：
function isRunningStandalone() {
return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
/* This code will be executed if app is running standalone */
}
如果您需要更多信息，Google Developers 有一个专门讨论此主题的页面：https://developers.google.com/web/updates/2015/10/display-mode
【讨论】：
display-mode: standalone since Nov 2014 但迟到总比没有好:)
display: standalone（不是display: fullscreen）stackoverflow.com/a/54652992/2833684
一个古老的问题，但现在可用于 Chrome Android 的更好的解决方案。
其中一种方式（最干净的 IMO）。您可以使用“start_url”键添加 Web App Manifest，该键的值将查询字符串参数添加到您的常用主页。
例如：- 如果主页 url 是 https://www.example.com。 在 Web App Manifest 集中
"start_url": "https://www.example.com/?user_mode=app"
Google 关于 Web 应用清单的指南：https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
【讨论】：
在 IOS 中，单机模式和 Web 模式的本地存储是不同的。使用 android KitKat 和 Chrome，当您在 web 版本的 localstorage 中保存值时，您可以在独立模式下检索它。
因此，当用户浏览网页版本时（在添加到主屏幕之前），您只需将 document.documentElement.clientHeight 保存到本地存储。然后，只需将 document.documentElement.clientHeight 的当前值与 localstorage 值进行比较。如果当前值为>，则为独立模式。
我在几台设备上都试过了。
【讨论】：
display-mode: standalone。
对于 IOS，我们有 window.navigator.standalone 属性要检查..
但对于 Android 上的 Chrome，它不支持此属性。检查这一点的唯一方法是计算屏幕宽度和高度。
下面是检查代码：
navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)
我从以下链接获得参考：
【讨论】：
display-mode: standalone。
对于从版本 39 开始的带有 Web 应用程序清单 (json) 的 Google Chrome (Android)，如果它是单页应用程序，我会使用这个“技巧”：
我在 manifest.json 中输入："start_url": "standalone.html"。
通常它是（在我的情况下为 index.html），但我从 index.html 中创建了一个相同的克隆：standalone.html（或任何你喜欢的）。
然后，为了检查，我使用这样的 Javascript：
var locurl = document.location.href;
if (locurl.indexOf("standalone.html") != -1) {
console.log("app is running standalone");
} else {
console.log("app is running in normal browser mode");
}
这行得通。
它可能也适用于具有此元标记的 Google Chrome（移动）版本 31-38：
<meta name="application-url" content="http://my.domain.com/standalone.html">。
尚未测试。
【讨论】：
检测它是否在 MIT AI2 webview 上运行：
if (typeof window.AppInventor!="undefined") { return true; }
【讨论】：
您必须使用 window.navigator.standalone，此 API 仅适用于移动 IOS safari，不适用于您的 macbook 或 iMac 的 safari...
【讨论】：
在 Android 上没有“正确”的方法，因此还没有 API 支持。 我们在我公司使用的解决方法 -
首次登录时，将屏幕高度存储在本地存储中。 我所说的 screenHeight 是指页面加载之前的 document.documentElement.clientHeight，从那时起 doc 会增长，并且它对实际可用屏幕高度的测量并不准确。
每当用户下次登录时 - 检查当前屏幕高度与存储的高度 - 如果它变大，则用户已进入全屏状态。
如果您确实存储了屏幕高度的 FIRST TIME 值，则它不会变小。
警告 - 清理现金的用户。 我们选择忽略这一点，因为大多数用户不这样做或相对很少这样做，并且（在我们看来）在一段时间内就足够了，直到有针对此的 API 修复（希望会有:)）
选项 b - 检查可用屏幕高度与设备屏幕高度，一些测试设备和浏览器模式的匹配显示了一些模式（webapp 中的可用高度
所有这一切都是一种解决方法，当然，我并没有假装它是获得所需功能的可靠稳定方法 - 但对我们来说它有效，所以我希望这有助于其他解决这个错误的人（不能称之为缺少如此重要的api功能其他方式）。祝你好运:)
【讨论】：
display-mode: standalone，由上面的@josemmo 回答。