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

问题描述 投票:0回答:9

我有一个 iPhone Web 应用程序,我有兴趣检测该应用程序是否从以下位置加载:

  1. iPhone Safari
  2. iPhone 安装了网络应用程序(通过添加到我的主屏幕),无需 Safari 栏即可加载。

有什么想法吗?

iphone mobile web-applications iphone-standalone-web-app
9个回答
71
投票

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

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

}

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.');
}
?>

享受吧!


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

2
投票

如何用 PHP 做到这一点并过滤误报

如果你想使用 PHP,我认为 @strat 的答案是正确的。但除非设置了支持移动应用程序的元,否则它将无法工作。否则,iPhone 会在家里放置一个打开移动游猎的书签。 此外,它还会返回误报,例如从 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>

1
投票

我不确定这种行为可以追溯到多远以前,但 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

主屏幕按钮/网络应用程序

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
来检测它是否已从主屏幕打开。


0
投票

我更喜欢用这一行来确定它是否是全屏/在网络应用程序中。

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

0
投票

“Navigator”类型上不存在属性“standalone”。

出现此错误,此解决方案是否已弃用?


-1
投票

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

我不知道它们是否是,但如果是,我相信您将能够在您的网站中的某个地方实现它。

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


-1
投票

可以简化为

var webApp = window.navigator.standalone || false;

可以再次简化为

var webApp = window.navigator.standalone;

© www.soinside.com 2019 - 2024. All rights reserved.