iPhone WebApps,有没有办法检测它是如何加载的?主屏与Safari?

时间:2010-04-29 15:54:29

标签: iphone mobile web-applications iphone-standalone-web-app

我有一个iPhone Web App,我有兴趣检测该应用程序是否已加载:

  1. iPhone Safari
  2. iPhone安装的网络应用程序(通过添加到我的主屏幕)加载没有野生动物园栏。
  3. 有什么想法吗?

8 个答案:

答案 0 :(得分:65)

您可以使用window.navigator.standalone只读布尔值JavaScript属性确定网页是否以全屏模式显示。 https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

if (window.navigator.standalone) {
    // fullscreen mode

}

答案 1 :(得分:11)

您可以通过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.');
}
?>

享受!

答案 2 :(得分:4)

这就是我使用的,效果很好:

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';
};

答案 3 :(得分:2)

如何使用PHP并过滤误报

如果您想使用PHP,我认为@strat的答案是正确的。除非设置了支持移动应用程序的meta,否则它将无效。否则,iPhone将在家中放置一个书签,打开手机游戏。 此外,它返回误报,例如从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>

答案 4 :(得分:1)

我不确定这种行为会持续多久,但iOS会向服务器提供不同的UserAgent字符串,可用于检测网页是否被webapp或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字符串中是否存在iPhoneiPad,并且缺少Safari来检测它是否已从主屏幕打开。

答案 5 :(得分:0)

我更喜欢这种单行程,以确定它是否是全屏/在网络应用中。

var webApp = (typeof window.navigator.standalone != 'undefined' && window.navigator.standalone ? true : false);

答案 6 :(得分:-1)

从iPhone Safari和WebApp访问网站时检查HTTP-Header,看看它们是否不同。

我不知道他们是不是,如果他们是,我相信你能够在你网站的某个地方实现。

http://php.net/manual/en/function.headers-list.php

答案 7 :(得分:-1)

可以简化为     var webApp = window.navigator.standalone || false;

可以再次简化为     var webApp = window.navigator.standalone;