iPhone WebApps，有没有办法检测它是如何加载的？主屏幕与 Safari？
Posted
技术标签:
【中文标题】iPhone WebApps，有没有办法检测它是如何加载的？主屏幕与 Safari？【英文标题】：iPhone WebApps, is there a way to detect how it was loaded? Home Screen vs Safari? 【发布时间】：2011-02-13 21:21:54 【问题描述】：我有一个 iPhone 网络应用程序，我有兴趣检测该应用程序是否从以下位置加载：
-
iPhone Safari
iPhone 安装了网络应用程序（通过添加到我的主屏幕），该应用程序在没有 safari 栏的情况下加载。
有什么想法吗？
【问题讨论】：
【参考方案1】：您可以使用 window.navigator.standalone 只读布尔 javascript 属性确定网页是否以全屏模式显示。 https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafarihtmlRef/Articles/MetaTags.html
if (window.navigator.standalone)
// fullscreen mode
【讨论】：
太棒了！我不知道我能做到这一点。 我真的只是笑着击掌。这比 UA 嗅探要好得多。谢谢！【参考方案2】：您可以如上所述通过 Javascript 检测模式 - 或者您可以使用 php 和用户代理。
<?
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),"iphone"))
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),"safari"))
echo('Running in browser on iPhone');
else
echo('Running as stand alone WebApp on iPhone');
else
echo('Running on device other than iPhone.');
?>
享受吧！
【讨论】：
【参考方案3】：这是我用的，效果很好：
if (window.navigator.userAgent.indexOf('iPhone') != -1)
if (window.navigator.standalone == true)
alert("Yes iPhone! Yes Full Screen!");
else
alert("Not Full Screen!");
; else
alert("Not iPhone!");
document.location.href = 'please-open-from-an-iphone.html';
;
【讨论】：
【参考方案4】：如何用 PHP 做到这一点并过滤误报
如果您想使用 PHP，我认为 @strat 的答案是正确的。除非设置了支持移动应用程序的元数据，否则它将无法工作。否则 iPhone 会在家中放置一个打开移动 safari 的书签。 此外，它还会返回误报，例如从 iPhone 上的任何其他浏览器（如 Facebook 浏览器）访问页面时。
幸运的是，独立的用户代理字符串有一个特殊性：它只有 3 个斜杠。我测试了其他各种浏览器，它们都有超过 3 个。这很骇人听闻，但我们可以利用它来发挥我们的优势。另外，有趣的是，应用中的标准 webview 将有 2 个斜线。
所以这是最小的工作示例：
<?php
// We need to add the mobile web app capable meta. Status bar is set to black to avoid our text go under the status bar.
?>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<?php
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if ( strpos($ua,"iphone") || strpos($ua,"ipad") )
if ( strpos($ua,"safari") )
echo('Running in safari on iPhone/iPad');
else if ( substr_count($ua, '/') === 3 )
echo('Running as stand alone WebApp on iPhone/iPad');
else if ( substr_count($ua, '/') === 2 )
echo('Running in a WebView on a iPhone/iPad app');
else
echo('Running in another browser on iPhone/iPad');
else
echo('Running on device other than iPhone/iPad.');
?>
</body>
</html>
【讨论】：
【参考方案5】：我不确定这种行为可以追溯到多远，但 ios 会向服务器显示不同的 UserAgent 字符串，这些字符串可用于检测网页是否正在由 web 应用程序或 safari 浏览器请求。
Safari 浏览器
Mozilla/5.0（iPhone；CPU iPhone OS 8_1_1，如 Mac OS X）AppleWebKit/600.1.4（KHTML，如 Gecko）版本/8.0 Mobile/12B436 Safari/600.1.4
主屏幕按钮/Web 应用程序
Mozilla/5.0（iPhone；CPU iPhone OS 8_1_1，如 Mac OS X）AppleWebKit/600.1.4（KHTML，如 Gecko）Mobile/12B436
请注意，它在 UserAgent 中不包含“Safari”。我已经确认这种行为至少可以追溯到 iOS 7，但我想更进一步。
因此，您可以测试 UserAgent 字符串中是否存在 iPhone 或 iPad 而缺少 Safari 以检测它是否已从主屏幕打开。
【讨论】：
【参考方案6】：我更喜欢这个单行来确定它是否是全屏/在网络应用程序中。
var webApp = (typeof window.navigator.standalone != 'undefined' && window.navigator.standalone ? true : false);
【讨论】：
【参考方案7】：从 iPhone Safari 和 WebApp 访问网站时检查 HTTP 标头，看看它们是否不同。
我不知道他们是否是，但如果他们是，我相信你将能够在你的网站的某个地方实现它。
http://php.net/manual/en/function.headers-list.php
【讨论】：
【参考方案8】：可以简化为
var webApp = window.navigator.standalone || false;
可以再次简化为
var webApp = window.navigator.standalone;
【讨论】：
你的第二个“简化”实际上打破了它，因为 .standalone 是一个只存在于Apple's iOS Safari的属性以上是关于iPhone WebApps，有没有办法检测它是如何加载的？主屏幕与 Safari？的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法检测 Apple Watch 是不是与 iPhone 配对？