Aplicación web iOS: muestra contenido solo si la aplicación es independiente

Si un usuario visita mi ejemplo de sitios web, desde Safari Mobile ¿cómo podría colocar allí una página en blanco que diga "Agregar a pantalla de inicio"? Una vez agregado, mostraría contenido diferente.

Querrá verificar dos cosas. Primero, ¿se está ejecutando en un dispositivo iOS? Segundo, es window.navigator.standalone == true ?

window.navigator.standalone es utilizado principalmente por los browseres de Webkit para indicar que la aplicación está en modo de pantalla completa (o independiente). Muchos dispositivos (como teléfonos con Android) son compatibles con esta propiedad, pero no tienen la opción de "Agregar a pantalla de inicio", como hacen los dispositivos con iOS, por lo que debe verificar ambos.

Manifestación: jsFiddle

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

Compruebe window.navigator.standalone .

Código ligero ligeramente diferente, basado en la solución @ThinkingStiff, y esta otra pregunta en este Post , para admitir la detección de IOS7 para proporcionar una interfaz CSS para agregar más padding-top en caso de título de aplicación transparente.

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