Componentes de la interfaz de usuario de Hiding Safari en el iPhone

Question

En un intento por ocultar los componentes de la interfaz de usuario de Safari para una aplicación web marcada como un icono de pantalla de inicio. Estoy utilizando esta etiqueta meta

<meta name="apple-mobile-web-app-capable" content="yes" /> 

como se especifica en iPhone Dev Center pero la barra de direcciones y la barra de herramientas están todavía allí cuando se lanzó desde el icono de la pantalla principal. ¿Qué debo hacer diferente? ¿Alguien tiene un ejemplo?

Answer 1

¿Se inicia desde la pantalla de inicio? La documentación en la página vinculada no menciona pero he encontrado este @Configuring Web Applications:

Por ejemplo, puede especificar un icono para su aplicación web utilizada para representarla cuando se añade a la pantalla de inicio, como se describe en “Especificación un icono de página web para Web Clip. "También puede minimizar la interfaz de usuario de Safari en iPhone, como se describe en" Cambiar la apariencia de la barra de estado "y" Ocultar componentes de interfaz de usuario Safari "cuando se inicia su aplicación web desde el hogar pantalla. Todas estas son configuraciones opcionales que cuando son agregadas a su contenido web son ignoradas por otras plataformas

Answer 2

Eso debería comportarse como se esperaba, lo he usado en el pasado sin ninguna dificultad.

Answer 3

Ha intentado añadir ...

<meta name="apple-touch-fullscreen" content="yes" /> 

Answer 4

Sé que esto es bastante viejo, pero me encontré con este durante la búsqueda de una solución. Pude solucionar esto agregando también:

window.top.scrollTo(0, 1); 

al método de carga del cuerpo. Espero que ayude a cualquiera que se encuentre con esto.

Answer 5

window.top.scrollTo(0, 1); 

Funciona en iPhone, pero no en iPad. He tenido éxito ocultar los componentes del navegador en el iPad (lo que presumiblemente todas partes) mediante el uso de

<meta name="apple-mobile-web-app-capable" content="yes" /> 

y el lanzamiento de un enlace de pantalla de inicio. También estoy usando

<meta name="viewport" 
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

No he intentado ver si los componentes del navegador aún están ocultos si dejo fuera las propiedades de la ventana gráfica.

Answer 6

http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW2

funciona en iOS 4.0.

Answer 7

Por lo que puedo decir, iOS solo presta atención a las banderas cuando realmente agregas la aplicación. Si la cosa que es compatible con apple-mobile-web-app no ​​funciona al principio, intente eliminar su aplicación de la pantalla de inicio y luego volver a agregarla.

me he encontrado algunos experimentos y encontró:

• no parece la ubicación de la etiqueta meta dentro de los encabezados de la materia (pensé que podría!)
  
• después de agregar la aplicación y hacer que elimine la barra de direcciones correctamente, si luego quita las metaetiquetas de la página web, iOS continúa eliminando la barra de herramientas.
  
• incluso después de reiniciar el dispositivo todavía 'recuerda' si eliminar la barra de herramientas. La única forma que he encontrado de restablecer este comportamiento es eliminar y volver a agregar la aplicación.

Espero que ayude!

Answer 8

probar este

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="viewport" content="width=device-width; user-scalable=0;"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<link rel="apple-touch-icon" href="icon.png"> 

Answer 9

<meta name="apple-mobile-web-app-capable" content="yes" /> 

Esto funcionará si:

1. Existe la etiqueta cuando se agrega la aplicación a la pantalla principal.
2. La aplicación se inicia desde la pantalla de inicio.

Answer 10

<meta name="apple-mobile-web-app-capable" content="yes" /> 

obras en iOS6 + Mobile Safari Browser pero sólo si se ha añadido la página a la pantalla de inicio después que haya incluido la etiqueta meta en su sitio.

Answer 11

todas las meta etiquetas anteriores y window.scrollTo, no funcionó en el ipad para mí, encontré un botón en safari junto a los marcadores donde aparece la opción 'Agregar a pantalla de inicio' crea un nuevo ícono de mosaico, y puede iniciar su aplicación web como si fuera una aplicación nativa, y no tiene barra de direcciones ahí.

Answer 12

Desde iOS 7.1, puede utilizar minimal-ui

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"> 

Answer 13

Hay una nueva directiva, llamado "mínimo-ui" que el navegador de iOS tiene en cuenta (al menos en el iPhone, donde probé). Las barras de herramientas están ocultas hasta que el usuario haga clic en la barra de estado en la parte superior. Muy bueno para aplicaciones de una página!

Aquí es el fragmento que utilizo:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">