Cómo ocultar completamente la barra de navegación en iPhone/HTML5

Question

Soy realmente nuevo en HTML5 para dispositivos móviles. Uso jQuery Mobile para mi aplicación actual y tengo algunos problemas para ocultar la barra de navegación.

me encontré con este sitio: http://m.somethingborrowedmovie.warnerbros.com/. (No me pega este enlace para promocionar la película.)

Estaba sorprendido por este sitio HTML5. ¿Alguien tiene alguna idea del método utilizado para ocultar la barra de navegación?

El menú también está muy bien hecho. ¿Hay algún marco para construir aplicaciones como esta?

Answer 1

Pruebe lo siguiente:

1. Añadir esta etiqueta meta en el head de su archivo HTML:

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

2. abre su sitio con Safari en el iPhone, y utilizar la función de marcador para agregar su sitio a la pantalla de inicio.

3. Regrese a la pantalla de inicio y abra el sitio marcado. La URL y la barra de estado desaparecerán.

Siempre y cuando solo necesite trabajar con el iPhone, debería estar bien con esta solución.

Además, su muestra en el sitio warnerbros.com usa el Sencha touch framework. Puede Google it para obtener más información o check out their demos.

Answer 2

Remy de Sharp tiene una buena descripción del proceso en su artículo "Doing it right: skipping the iPhone url bar":

Hacer el iPhone ocultar la barra de URL es bastante simple, es necesario ejecutar el JavaScript siguiente:

window.scrollTo(0, 1);

Sin embargo hay la pregunta de cuándo? Tienes que hacer esto una vez la altura es correcta por lo que el iPhone puede desplazarse hasta el primer píxel de el documento, de lo contrario se tratará, entonces la altura cargará forzando la barra de URL de nuevo a ver.

Puedes esperar hasta que las imágenes han cargado y se activa el evento window.onload , pero esto no siempre funciona, si todo está en caché, se activa el evento antes de tiempo y la scrollTo nunca tiene la oportunidad de saltar. Aquí hay un ejemplo usando window.onload: http://jsbin.com/edifu4/4/

Yo personalmente uso un temporizador durante 1 segundo - que es suficiente tiempo en un dispositivo móvil mientras espera para hacer, pero lo suficientemente larga que no se dispara demasiado pronto :

setTimeout(function() { window.scrollTo(0, 1); }, 1000); 

sin embargo, sólo desea que esto configuración si se trata de un iPhone (o simplemente móvil) del navegador, por lo que una aspiración astuto (yo no suelen alentar esto, pero estoy cómodo con esto evitar que los navegadores de escritorio "normales" salten un píxel):

/mobile/i.test(navigator.userAgent) && setTimeout(function 
() { window.scrollTo(0, 1); }, 1000);

La última parte de esta, y esta es la parte que parece ser falta de algunos ejemplos que he visto en la web es la siguiente: si el usuario vinculada específicamente a un fragmento de URL, es decir, la url tiene un hash en , no quieres saltar. Así que si navego a http://full-frontal.org/tickets#dayconf - Quiero que el navegador para desplazarse forma natural al elemento cuyo id es dayconf, y no salta a la parte superior usando scrollTo (0, 1):

/mobile/i.test(navigator.userAgent) && !location.hash && 
setTimeout(function() { window.scrollTo(0, 1); }, 1000);​ 

probar esto en un iPhone (o simulador) http://jsbin.com/edifu4/10 y verá que solo se desplazará cuando haya aterrizado en la página sin un fragmento de url.

Answer 3

El problema con todas las respuestas dadas hasta ahora es que en el sitio algo prestado, la barra Mac permanece totalmente oculta cuando se desplaza hacia arriba, si solo usa la solución scrollTo y luego el usuario se desplaza hacia arriba, la barra de navegación es revelado de nuevo, parece que tiene todo el sitio dentro de un div con desplazamiento para que en lugar de desplazarse por la página solo se desplace dentro de div y mantenga oculta la barra de navegación. La única forma de revelar la barra de navegación es tocar la parte superior de la pantalla.

Answer 4

Navegación de documento javascript simple a "#" lo hará.

window.onload = function() 
{ 
document.location.href = "#"; 
} 

Esto obligará a la barra de navegación a eliminarse al cargar.