Ocultar barra de navegación en aplicaciones web móviles

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Una regla en el desarrollo de aplicaiones web móviles es la de aprovechar siempre el máximo espacio que ofrecen las pantallas de los dispositivos, con iOS y Android empleando WebKit como motor de renderización en sus navegadores tienes la posibilidad de construir versiones de una web para posteriormente visualizarla como una aplicación nativa.

Con el siguiente código lograremos ocultar la barra de navegación cuando tengamos en pantalla nuestra web abierta:

window.addEventListener(“load”,function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});

El método window.scrollTo es la clave para esconder la barra de navegación. La función envolvente setTimeout es requerida por el dispositivo iPhone para poder ocultar la barra. El no usar setTimeout puede ocasionarnos algunos problemas.

Como bonus davidwalsh nos ofrece un truco a modo de que si un usuario añade nuestra aplicación web como favorita en su dispositivo, poder quitar de forma automática la barra de navegación, simplemente utilizando la siguiente metaetiqueta:

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

La barra de direcciones estará oculta hasta que el usuario recorra de abajo hacia arriba la aplicación. Con la barra de direcciones oculta, la aplicación web se verá exactamente como una aplicación nativa.

4 comentarios

  1. Juan Pablo dijo:
    2 Marzo, 2012
    Responder

    es posible que estos dos métodos ya sean obsoletos? porque los pruebo en una aplicacion mobile que estoy desarrollando, y con ninguno de los dos logro ocultar la barra de navegacion.

    gracias!

  2. pablo dijo:
    11 Julio, 2012
    Responder

    Va perfecto! es justo lo que buscaba. Gracias!

  3. nik dijo:
    11 Enero, 2013
    Responder

    ola me gustaria si me pueden ayudar quiero ocultar la barra de navegacion en otras palabras q no se muestre el url cuando ingreso a la pagina web q cree y q de forma movil entrare..esto desarrollandolo en android ..pincho el boton y me direcciona pero no puedo ocultar la barra ..de ante mano el q me pueda ayudar se agredece..un saludos

  4. gio dijo:
    9 Mayo, 2013
    Responder

    Hola nik quiero hacer lo mismo ocultar la barra quisiera saber si ya lo lograste y como?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.