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

fullscreen javascript example

Question

Soy 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.

Encontré este sitio: http://m.somethingborrowedmovie.warnerbros.com/ . (No pego este enlace para promocionar la película).

Me sorprendió 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

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 se revela nuevamente, 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 del 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 2

La navegación simple del documento de Javascript a "#" lo hará.

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

Esto obligará a la barra de navegación a eliminarse en la carga.

Answer 3

Pruebe lo siguiente:

1. Agregue esta meta en el head de su archivo HTML:

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

2. Abra su sitio con Safari en iPhone y use 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 que 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 marco táctil de Sencha . Puede buscarlo en Google para obtener más información o consultar sus demostraciones .

Answer 4

Remy Sharp tiene una buena descripción del proceso en su artículo "Hacer las cosas bien: omitir la barra de direcciones URL del iPhone" :

Hacer que el iPhone oculte la barra de direcciones es bastante simple, debe ejecutar el siguiente JavaScript:

window.scrollTo(0, 1); 

Sin embargo, está la cuestión de cuándo? Tienes que hacer esto una vez que la altura es correcta para que el iPhone pueda desplazarse al primer píxel del documento, de lo contrario lo intentará, luego la altura se cargará forzando a la barra de URL a volver a visualizarse.

Puede esperar hasta que se carguen las imágenes y se active el evento window.onload, pero esto no siempre funciona, si todo está en caché, el evento se dispara demasiado pronto y el scrollTo nunca tiene la posibilidad de saltar. Aquí hay un ejemplo usando window.onload: http://jsbin.com/edifu4/4/

Yo personalmente uso un temporizador por 1 segundo, que es suficiente tiempo en un dispositivo móvil mientras esperas a renderizar, pero el tiempo suficiente para que no se active demasiado pronto:

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

Sin embargo, solo quieres configurar esto si se trata de un navegador de iPhone (o simplemente móvil), por lo que un olfateo astuto (en general no lo animo, pero me siento cómodo con esto para 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 esto, y esta es la parte que parece faltar en algunos ejemplos que he visto en la web, es esta: si el usuario se vinculó específicamente a un fragmento de URL, es decir, la url tiene un hash, usted no quiero saltar Entonces, si navego a http://full-frontal.org/tickets#dayconf , quiero que el navegador se desplace naturalmente al elemento cuyo id es dayconf, y que no salte a la cima usando scrollTo (0, 1):

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

Pruébelo 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.