blocks|key|164361|text|对于IOS，我们需要检查window.navigator.standalone属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|164362|但对于Android上的Chrome，它不支持这个属性。检查这一点的唯一方法是计算屏幕宽度和高度。|164363|下面是用来检查的代码：|164364|navigator.standalone+=+navigator.standalone+%7C%7C+(screen.height-document.documentElement.clientHeight<40)|code-block|syntax|javascript|164365|我从下面的链接获得了参考：|164366|Home+Screen+Web+Apps+for+Android+Thanks+to+Chrome+31|164367|entityMap|0|LINK|mutability|MUTABLE|url|http://java.dzone.com/articles/home-screen-web-apps-android^0|C|R|0|0|0|0|0|0|1G|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|16|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

For the IOS we have <code>window.navigator.standalone</code> property to check..

But for Chrome on Android, it doesn't support this property. Only way to check this is by calculating screen width and height.

Below is the code to check that:

<pre><code>navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight&lt;40)
</code></pre>

I got reference from below link:

<a href="http://java.dzone.com/articles/home-screen-web-apps-android" rel="noreferrer">Home Screen Web Apps for Android Thanks to Chrome 31</a>

blocks|key|2973020|text|对于IOS，独立模式和web模式的本地存储是不同的。使用android+KitKat和Chrome，当你将一个值保存在网页版本的本地存储中时，你可以在独立模式下检索它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2973021|因此，当用户浏览网页版本时(在添加到主屏幕之前)，您只需将document.documentElement.clientHeight保存到本地存储即可。然后，将document.documentElement.clientHeight的当前值与本地存储值进行比较。如果当前值为>，则为独立模式。|2973022|我在几个设备上尝试了一下。|2973023|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

With IOS, localstorage for the standalone and web mode are different. With android KitKat and Chrome, when you save a value in localstorage on the web version, you're able to retrieve it in standalone mode.

So, you just have to save document.documentElement.clientHeight to localstorage when user is browsing the web version (before adding to homescreen). Then, just compare the current value of document.documentElement.clientHeight with localstorage value. If the current value is >, it's standalone mode.

I tried it on several devices.

blocks|key|163200|text|对于Google+Chrome+(Android)从39版本开始的web应用程序清单(json)，如果它是一个单页面应用程序，我使用这个“技巧”：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163201|在manifest.json中我放入："start_url":+"standalone.html"。|offset|length|style|CODE|163202|通常是这样的(在我的例子中是index.html)，但是我从index.html创建了一个完全相同的克隆:+standalone.html+(或者你喜欢的任何东西)。|163203|然后，为了检查，我像这样使用Javascript：|163204|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");
}|code-block|syntax|javascript|163205|这是可行的。|163206|它可能也适用于Google+Chrome+(移动)版本31-38，带有这个元标签：|163207|<meta+name="application-url"+content="http://my.domain.com/standalone.html">。还没有测试过。|163208|entityMap^0|0|J|U|0|0|0|0|0|0|0|24|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|14|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

For Google Chrome (Android) from version 39 onwards with web application manifest (json) and in case, it is a single page application, I use this 'trick':

In the manifest.json I put: <code>"start_url": "standalone.html"</code>. 

Normally it is (in my case index.html), but from index.html I make an identical clone: standalone.html (or whatever you fancy).

Then, to check, I use Javascript like this:

<pre><code>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");
}
</code></pre>

That works.

It might work too in Google Chrome (mobile) version 31-38 with this meta-tag:

<code>&lt;meta name="application-url" content="http://my.domain.com/standalone.html"&gt;</code>. 
Not tested, yet.

blocks|key|2760456|text|在Android上没有“合适的”方法，因此还没有API支持。我们在我的公司中使用的变通方法-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2760457|2760458|在第一次登录时，将屏幕高度存储在本地存储中。我说的screenHeight是指页面加载之前的屏幕，因为在页面加载之前，文档会增长，而且它不能准确衡量用户下次登录时的实际可用屏幕-检查当前屏幕高度与存储的屏幕高度-如果屏幕高度变大，则用户已经全屏显示。|ordered-list-item|2760459|2760460|如果您确实存储了屏幕高度的第一时间值，则不存在可以使其变小的情况。|2760461|警告-将清理现金的用户。我们选择忽略这一点，因为大多数用户不这样做或相对很少这样做，而且(在我们看来)这将在一段时间内足够(在我们看来)，直到有API修复(希望有:)|offset|length|style|BOLD|2760462|选项b-检查可用屏幕高度与设备屏幕高度，一些测试设备和浏览器模式的匹配显示出某种模式(webapp中的可用高度<+70+)-我坚信更广泛的比较可以在90%25的情况下满足90%25的设备的需要。|2760463|所有这些都是一种变通的方法，当然，我并不是假装这是一种稳定可靠的方法来获得想要的功能--但对我们来说，它是有效的，所以我希望这对其他与这个bug作斗争的人有所帮助(不能以其他方式调用缺少这些关键api功能的人)。祝你好运:)|2760464|📷|atomic|2760465|​|2760466|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/a587f4254c18d3f5219ee4b9a89f26a7.jpeg|imageAlt^0|0|0|0|0|0|0|2|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|18|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1B|8|@$K|1C|L|1D|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1G|8|@]|9|@$K|1H|L|1I|1|1J]]|A|$]]|$1|V|3|W|5|6|7|1K|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14|15|-4]]]]

There is no 'proper' way to do it on Android, hence no API support yet.
The workaround we used in my company - 

<ol>
<li>On first login, store screenheight in localstorage.
By screenHeight i mean document.documentElement.clientHeight before page loads, since then doc grows and its not accurate measure for real available screen height.</li>
<li>Whenever user logs in next time - check current screenheight vs stored - if it becomes bigger, the user has gone fullscreen.</li>
</ol>

There is no scenario upon which it can become smaller, IF YOU DO store FIRST TIME value for screen height.

Caveat - user that will clean cash.
We chose to ignore that, since most users don't do it or do it relatively rarely, and it will suffice(in our opinion) for some time until there will be API fix for this( hopefully there will be :) )

Option b - check available screenheight vs device screen height, the matchup for a few test devices &amp; browser modes showed some pattern( available height &lt; 70 in webapp) - i strongly believe a wider comparison can get values that will suffice for 90% of devices in 90% cases.

All of this is a workaround, of course, i m not pretending its a solid stable way to get to desired functionality - but for us it worked, so i hope this helps somebody else who fought this bug(cant call missing such crucial api feature other way). Good luck :)<img src="https://i.stack.imgur.com/bHmI6.jpg" alt="enter image description here">

blocks|key|165581|text|这个答案有很大的延迟，但我把它贴在这里只是为了其他正在努力寻找解决方案的人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|165582|最近谷歌实现了CSS+conditional+display-mode:+standalone，所以有两种可能的方法来检测应用程序是否独立运行：|offset|length|style|CODE|165583|使用CSS：|165584|@media+all+and+(display-mode:+standalone)+{
++++/*+Here+goes+the+CSS+rules+that+will+only+apply+if+app+is+running+standalone+*/
}|code-block|syntax|javascript|165585|同时使用CSS和Javascript：|165586|function+isRunningStandalone()+{
++++return+(window.matchMedia('(display-mode:+standalone)').matches);
}
...
if+(isRunningStandalone())+{
++++/*+This+code+will+be+executed+if+app+is+running+standalone+*/
}|165587|如果您需要更多信息，谷歌开发人员有一个专门针对此主题的页面：https://developers.google.com/web/updates/2015/10/display-mode|165588|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/updates/2015/10/display-mode^0|0|N|O|0|0|0|0|0|U|1Q|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

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 <code>display-mode: standalone</code>, so there are two possible ways to detect if an app is running standalone:

Using CSS:

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

Using both CSS and Javascript:

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

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

blocks|key|2760566|text|iOS和Chrome+WebApp的表现是不同的，这就是我来讨论以下问题的原因：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2760567|isInWebAppiOS+=+(window.navigator.standalone+===+true);
isInWebAppChrome+=+(window.matchMedia('(display-mode:+standalone)').matches);|code-block|syntax|javascript|2760568|与此处相同：Detect+if+iOS+is+using+webapp|offset|length|2760569|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/17989777/detect-if-ios-is-using-webapp/40932301#40932301^0|0|0|6|T|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

iOS and Chrome WebApp behaves different, thats the reason i came to following:
<pre><code>isInWebAppiOS = (window.navigator.standalone === true);
isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);
</code></pre>
Same as here: <a href="https://stackoverflow.com/questions/17989777/detect-if-ios-is-using-webapp/40932301#40932301">Detect if iOS is using webapp</a>

blocks|key|163337|text|这是一个老生常谈的问题，但今天在Chrome+Android上的解决方案要好得多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163338|方法之一(最干净的IMO)。您可以添加带有“start_url”键的Web+App+Manifest，该键的值可将查询字符串参数添加到您通常的主页。|163339|例如：-如果主页url为https://www.example.com。在Web应用程序清单集中|offset|length|163340|++++"start_url":+"https://www.example.com/?user_mode=app"|code-block|syntax|javascript|163341|谷歌关于网络应用程序清单的指南：https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/|163342|entityMap|0|LINK|mutability|MUTABLE|url|https://www.example.com/|1|https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/^0|0|0|C|N|0|0|0|G|2A|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@$F|16|G|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

An old question but significantly better solutions available today for Chrome Android.

One of the ways(cleanest IMO). You may add Web App Manifest with a 'start_url' key with a value that adds a query string parameter to your usual homepage.

ex:- if homepage url is <a href="https://www.example.com" rel="noreferrer">https://www.example.com</a>.
in Web App Manifest set

<pre><code> "start_url": "https://www.example.com/?user_mode=app"
</code></pre>

Google's guide about Web app manifest:<a href="https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/" rel="noreferrer">https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/</a>

blocks|key|2973328|text|要检测它是否在麻省理工学院AI2+webview上运行，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2973329|if+(typeof+window.AppInventor!="undefined")+{+return+true;+}|code-block|syntax|javascript|2973330|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To detect if it's running on MIT AI2 webview:

<pre><code>if (typeof window.AppInventor!="undefined") { return true; }
</code></pre>

blocks|key|164504|text|你必须使用window.navigator.standalone，这个应用程序接口只能在移动IOS+safari上工作，不能在你的macbook或iMac的safari上运行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|164505|entityMap^0|5|R|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

you have to work with <code>window.navigator.standalone</code>, this API is only works on mobile IOS safari, not event on your macbook or iMac's safari...

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 <code>window.navigator.standalone</code> so you can't detect whether you are running as a standalone app.
<a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen" rel="noreferrer">The reference</a> says:
<blockquote>
How can I detect if the app is running as an installed app?
You can’t, directly.
</blockquote>
Notice it says &quot;directly&quot;. My question is can we do it indirectly? Is there some tricky way to make an educated guess?

How to detect if web app running standalone on Chrome mobile

Chrome mobile最近添加了类似于iOS的主屏幕添加功能。这很酷，但它不像iOS那样支持它--它不支持window.navigator.standalone，所以你无法检测你是否正在作为一个独立的应用程序运行。说：如何检测应用程序是否作为已安装的应用程序运行？你不能直接这么做。注意，上面写着“直接”。我的问题是...

问如何检测web应用是否在Chrome手机上独立运行
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测web应用是否在Chrome手机上独立运行EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测web应用是否在Chrome手机上独立运行
EN