如何检测网页应用是否在Chrome移动版上独立运行 [英] How to detect if web app running standalone on Chrome mobile

问题描述

Chrome移动版最近添加了添加到主屏幕的功能，与iOS类似。这很酷，但它不像iOS那样支持它 - 它不支持 window.navigator.standalone ，所以你不能检测你是否作为独立应用程序。

参考资料说：

如何检测应用程序是否作为已安装的应用程序运行？

你不能，直接。

注意它说直接。我的问题是我们可以间接地做到吗？是否有一些棘手的方法来进行有根据的猜测？

解决方案

这个答案有一个很大的延迟，但我只是在这里发布它对于正在努力寻找解决方案的其他人来说。

最近Google实施了CSS条件 display-mode：standalone ，所以有两种可能的方式来检测应用程序是否独立运行：使用CSS：

  @media all和（display-mode：standalone）{
 / *这里的CSS规则仅适用于应用程序独立运行* / 
} 
  

使用CSS和Javascript：

  function isRunningStandalone（）{
 return（window.matchMedia（'（display-mode：standalone）'）。matches）; 
 
 
 if（isRunningStandalone（））{
 / *如果应用程序正在独立运行* / 
} 
，将执行此代码 

如果您需要更多信息，Google Developers有一个专门讨论此主题的页面：https://developers.google.com/web/updates/2015/10/display-mode

Chrome mobile has recently added the ability to add to home screen, similar to iOS. This is cool but it doesn't support it as well as iOS - it doesn't support window.navigator.standalone so you can't detect whether you are running as a standalone app.

The reference says:

How can I detect if the app is running as an installed app?

You can’t, directly.

Notice it says "directly". My question is can we do it indirectly? Is there some tricky way to make an educated guess?

解决方案

This answer comes with a huge delay, but I post it here just for other people who are struggling to find a solution.

Recently Google has implemented the CSS conditional display-mode: standalone, so there are two possible ways to detect if an app is running standalone:

Using CSS:

@media all and (display-mode: standalone) {
    /* Here goes the CSS rules that will only apply if app is running standalone */
}

Using both CSS and Javascript:

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

If you need more information, Google Developers has a page dedicated to this topic: https://developers.google.com/web/updates/2015/10/display-mode

这篇关于如何检测网页应用是否在Chrome移动版上独立运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！