ios - iOS Web App：仅在应用程序独立时显示内容

Question

如果用户从 Safari Mobile 访问我的网站示例，我怎么能在那里放置一个空白页面，上面写着“添加到主屏幕。”？一旦添加，它将显示不同的内容。

Answer 1

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

window.navigator.standaloneWebkit 浏览器主要使用它来指示应用程序处于全屏（或独立）模式。许多设备（如运行 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
    };
};

Answer 2

检查window.navigator.standalone。

Answer 3

略有不同的代码，基于@ThinkingStiff 解决方案和this Post on this other question，以支持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";
}