我有一个 iPhone Web 应用程序,我有兴趣检测该应用程序是否从以下位置加载:
- 苹果浏览器
- iPhone 安装了 web 应用程序(通过添加到我的主屏幕),它在没有 safari 栏的情况下加载。
有任何想法吗?
我有一个 iPhone Web 应用程序,我有兴趣检测该应用程序是否从以下位置加载:
有任何想法吗?
您可以使用 window.navigator.standalone 只读布尔 JavaScript 属性确定网页是否以全屏模式显示。https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
if (window.navigator.standalone) {
// fullscreen mode
}
您可以如上所述通过 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.');
}
?>
享受!
这是我使用的,效果很好:
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';
};
如果您想使用 PHP,我认为 @strat 的答案是正确的。除非设置了支持移动应用程序的元数据,否则它将无法工作。否则 iPhone 会在家中放置一个打开移动 safari 的书签。此外,它还会返回误报,例如从 iPhone 上的任何其他浏览器(如 Facebook 浏览器)访问该页面时。
幸运的是,独立的用户代理字符串有一个特殊性:它只有 3 个斜杠。我测试了其他各种浏览器,它们都超过 3 个。这很 hackish,但我们可以利用它来发挥我们的优势。此外,有趣的是,应用程序中的标准 web 视图将有 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>
我不确定这种行为可以追溯到多远,但 iOS 会向服务器显示不同的 UserAgent 字符串,这些字符串可用于检测 webapp 或 safari 浏览器是否正在请求页面。
Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B436 Safari/600.1.4
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,但我想更进一步。
因此,您可以测试是否存在iPhone
或iPad
在 UserAgent 字符串中,以及Safari
是否检测到它已从主屏幕打开。
我更喜欢这个单线来确定它是否是全屏/在网络应用程序中。
var webApp = (typeof window.navigator.standalone != 'undefined' && window.navigator.standalone ? true : false);
从 iPhone Safari 和 WebApp 访问站点时检查 HTTP-Headers 以查看它们是否不同。
我不知道他们是否是,但如果他们是,我相信你将能够在你的网站的某个地方实现它。
可以简化为
var webApp = window.navigator.standalone || false;
可以再次简化为
var webApp = window.navigator.standalone;