iOS Web App：仅当应用程序独立时才显示内容

Posted 2023-03-14

【中文标题】iOS Web App：仅当应用程序独立时才显示内容

【英文标题】：iOS Web App: Showing content only if the application is standalone

【发布时间】：2011-11-11 07:51:27

【问题描述】：

如果用户从 Safari Mobile 访问我的网站示例，我如何在其中放置一个显示“添加到主屏幕”的空白页面？添加后会显示不同的内容。

【参考方案1】：

您需要检查两件事。首先，它是否在 ios 设备上运行？二、是window.navigator.standalone == true？

window.navigator.standalone 主要由 Webkit 浏览器用来指示应用程序处于全屏（或独立）模式。很多设备（例如运行 android 的手机）都支持此属性，但没有像 iOS 设备那样的“添加到主屏幕”选项，因此您需要同时检查两者。

演示：

javascript：

function isIOS() 
    var userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test( userAgent );
;

function isStandalone() 
    return ( isIOS() && window.navigator.standalone );
;

window.onload = function () 
    if( isStandalone() || !isIOS() )  //either ios+standalone or not ios
        //start app
     else 
        //display add to homescreen page
    ;
;

【讨论】：

在打字稿中？

【参考方案2】：

检查window.navigator.standalone。

【讨论】：

对不起，我不明白你的意思。

【参考方案3】：

代码略有不同，基于@ThinkingStiff解决方案，和这个other question on this Post，支持IOS7检测，提供CSS接口，在应用标题透明的情况下添加更多的padding-top。

isIOS7 = function() 
  return navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
;
isStandaloneAndIOS7 = function() 
  return isIOS7() && window.navigator.standalone;
;
if (isStandaloneAndIOS7()) 
  body = document.getElementsByTagName("body")[0];
  body.className = body.className + " standalone";