Usando la etiqueta meta de Apple para aplicación web de pantalla completa

Question

Estoy tratando de utilizar la etiqueta

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

para obtener iOS Safari para mostrar una página sin el material del navegador; al menos, eso es lo que creo que se supone que debe hacer por mí. (El Apple documentation no entra en detalles).

Hasta ahora, no puedo hacer que haga nada. Here is a JSBin example. Con o sin la etiqueta <meta>, la página aparece tanto en un iPod Touch como en un iPad 2 con las cosas del navegador en la parte superior (y en la parte inferior de la pequeña pantalla).

¿Hay algo más que deba suceder para afectar el navegador? ¿O mis expectativas sobre cómo debería funcionar son incorrectas? (Tenga en cuenta que, a través de weinre, he comprobado el indicador "windows.navigator.standalone", y parece ser false.)

Answer 1

Eso solo hace lo que quiere cuando el usuario agrega un enlace a su aplicación a su pantalla de inicio.

Un enfoque común para el caso en el navegador es agregar una llamada al window.scroll(0,1) que sacará las cosas del navegador de la parte superior de la pantalla. (No hay manera de limpiar el material de fondo.)

Además, es posible que desee una etiqueta que diga que no quiere escalado:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1" /> 

Answer 2

Lo que la etiqueta meta de hacer es cuando ve la página en el navegador, agrega una opción para agregar su página a la pantalla de inicio. Cuando abres tu página a través del acceso directo a la pantalla de inicio, estará en pantalla completa y el navegador .standalone se establecerá en verdadero. Esto es a lo que la gente se refiere cuando hablan del modo de pantalla completa.