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

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

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

Answer 2

检查window.navigator.standalone 。

Answer 3

略微不同的代码，基于@ThinkingStiff解决scheme， 这个职位上的另一个问题 ，以支持IOS7检测提供CSS界面，以添加更多的填充顶部的情况下透明的应用程序标题。

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