Pantalla completa de iPad WebApp en Safari

83

Apple dice en la referencia HTML de Safari que se supone que el siguiente código hace que la aplicación web sea de pantalla completa en iPhone OS 2.1 y versiones posteriores.

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

Pero no parece funcionar. ¿Hay alguna forma de ocultar la barra de título / ubicación dentro de Safari en una aplicación web para iPad?

ipad web-applications iphone-standalone-web-app ChrisB
fuente

Respuestas:

120

Esto solo funciona después de guardar un marcador de la aplicación en la pantalla de inicio. No si solo navega por el sitio normalmente.

jamone
fuente
13
Si agrega esta metaetiqueta a su antigua página web de URL que ha navegado anteriormente en Safari, primero debe actualizar la URL y luego agregarla a la pantalla de inicio para que la metaetiqueta funcione.
Scott Chu
Esto no me funciona en un proyecto de laravel. Agregué esto a mi plantilla de diseño app.blade. Esto es utilizado por cada una de mis páginas, por lo que el encabezado debería (y aparece) en cada página. Sin embargo, todavía tengo barras de Safari en mi iPhone y iPad incluso después de hacer muchas pruebas para borrar el caché y volver a crear el acceso directo de la pantalla de inicio como se menciona en esta publicación. ¿Hay algo más que pueda evitar que las barras de safari se oculten? pastebin.com/iSFDXjFz aquí está la sección principal de mi archivo app.blade.php. Gracias por adelantado.
Frantumn
14

Si desea permanecer en un navegador sin abrir una nueva ventana, use este código HTML:

<a href="javascript:this.location = 'index.php?page=1'">
Remco de Jong
fuente
4
Esto no parece relevante para la pregunta o el tema en cuestión. ¿Quizás podrías explicar cómo se relaciona?
skeggse
6
Muy relevante. Siempre es el siguiente problema después de obtener la aplicación web en pantalla completa.
Shrimpwagon
Para mí, el siguiente problema es "¿cómo actualizo la página ahora que está en modo de pantalla completa?"
Nick
13

  1. Primero, inicie su navegador Safari desde la pantalla de inicio y vaya a la página web que desea ver en pantalla completa.

  2. Después de localizar la página web, toque el icono de flecha en la parte superior de la pantalla.

  3. En el menú desplegable, toque la opción Agregar a la pantalla de inicio.

  4. Se debe mostrar la ventana Agregar a la página de inicio. Puedes personalizar la descripción que aparecerá como título en la pantalla de inicio de tu iPad. Cuando haya terminado, toque el botón Agregar.

  5. Ahora debería aparecer un nuevo icono en la pantalla de inicio. Al tocar el icono, se abrirá la página web en modo de pantalla completa.

Nota: El icono de la pantalla de inicio de su iPad solo abre la página marcada en el modo de pantalla completa. La siguiente página que visite contendrá la dirección de Safari y las barras de título. Esta forma de reproducir su página web o presentación HTML5 en el modo de pantalla completa funciona si el código fuente de la página web contiene la siguiente etiqueta:

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

Puede agregar esta etiqueta a su página web utilizando una herramienta de terceros, por ejemplo, iWeb SEO Tool o cualquier otra que desee. Tenga en cuenta que primero debe agregar la etiqueta, actualizar la página y luego agregar un marcador a la pantalla de inicio.

Code.Town
fuente
Que podría haber dicho que esta es una copia directa de una instrucción encontrar en ispringsolutions.com/articles/... :-)
Jochem Schulenklopper
3
Y tal vez hayan copiado el mío. :) Mira la fecha en la que he respondido a esta pregunta y compárala con su fecha de publicación.
Code.Town
¡Salud! Este es un tipo de usted. :)
Code.Town
7

Solo abre la primera página (marcada) en pantalla completa. Cualquier página siguiente se abrirá CON la barra de direcciones visible nuevamente. Cualquiera que sea la metaetiqueta que pongas en el encabezado de tu página ...

Joop Stringer
fuente
stackoverflow.com/questions/6429492/…
Alpha Codemonkey
1

Este sitio tiene una solución de trabajo, el mismo efecto, usa algo de javascript para configurar el primer div secundario a la altura total de la ventana gráfica. http://webapp-net.com/Demo/Index.html

xiatica
fuente
0

Parece que la mayoría de las respuestas de este hilo no se han mantenido al día. iOS Safari en iPads tiene soporte de pantalla completa ahora y es muy fácil de implementar usando javascript.

Aquí está mi artículo completo sobre cómo implementar la capacidad de pantalla completa en su aplicación web.

Marvin Danig
fuente