Question

很容易检测全屏WebApp（即包含<meta name="apple-mobile-web-app-capable" content="yes">的WebApp）是如何启动的 - 只需检查window.navigator.standalone

是否可以对非全屏WebApp执行相同的操作？

我想向用户显示一个“书签此网页”泡泡（如http://youtube.com上所示），但如果网页是从主屏幕启动的话，我不想显示它。

我很确定这是可能的，因为YouTube是一个非全屏的WebApp，它没有显示“给我加书签！”从主屏幕启动时出现泡沫

Answer 1

我可能在您的问题中遗漏了一些内容，但是：window.navigator.standalone告诉我们该应用是否在全屏模式下当前（如果浏览器完全支持此属性）。

这意味着：如果该属性存在并且为false，则可能需要提供书签按钮。如果它存在并且是真的，请不要显示它（app已经从主屏幕运行）。如果缺少该属性，请不要显示书签按钮，因为用户代理不支持它。

尝试访问www.luscarpa.com。使用Safari，然后将其添加到主屏幕，并注意区别。

它还有关于全屏模式的信息（我已经了解了它）：http://www.luscarpa.com/development/make-your-website-an-iphone-web-application/

Answer 2

if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
        document.write('<link rel="stylesheet" href="add2home.css">');
        document.write('<script type="application/javascript" src="add2home.js"><\/s' + 'cript>');
}

来自cubiq.org/add-to-home-screen的小脚本似乎完成了工作

当然，如果您没有使用add2home脚本，那么您应该更改文件名。

Answer 3

霍勒斯，你可以研究一下谷歌评论的javascript源代码，看起来他们可能已经在他们的YouTube泡泡检测方案中使用了 http://code.google.com/p/mobile-bookmark-bubble

Answer 4

看看在Safari中打开的youtube网站网址，在网址的最后一部分，有一个home /？bmb = 1，我认为bmb = 1实际上有所不同，当你为这个页面添加书签时， url将包含此bmb变量，然后当您按下主页web按钮时，在服务器端您可以检测到这一点，并且知道它来自主页web按钮。

检测非全屏WebApp的加载方式（Home Screen v.Safari）

4 个答案: