12 votos

¿Es posible ocultar la barra de direcciones y la barra de estado en Safari de iOS 7?

¿Es posible ocultar la barra de direcciones y la barra de estado en iOS 7?

En una aplicación apaisada estoy usando el siguiente código para hacerlo para versiones anteriores de iOS y funciona bien incluso en IOS 7: al abrir la página se pone a pantalla completa y se queda así.

JS:

window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

HTML:

<!-- For iOS web apps -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="AMC Walking Dead Story Sync">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

El caso es que en iOS 7 iPhone y iPad al tocar la parte inferior de la pantalla aparece la barra de direcciones y la barra de estado y la única forma de deshacerse de ella es cambiar la orientación del teléfono y luego volver a cambiarla a la orientación anterior. ¿Hay alguna forma de evitar esa manipulación?

15voto

Leftium Puntos 296

Hay un método: <meta name="viewport" content="minimal-ui”>
( pero sólo funciona en iOS 7.1 - no en 7.0 ni 8.0 )

fuente: StackOverflow


Más detalles, en Registro de cambios y notas de la versión de iOS 7.1 beta 2 :

Notas del Safari

Se ha añadido una propiedad, minimal-ui, para la metaetiqueta viewport key que permite minimizar las barras superior e inferior del iPhone mientras la página se carga. Mientras se está en una página que utiliza minimal-ui, al tocar la barra superior hace que las barras vuelvan a aparecer. Si se vuelve a tocar en el contenido, las barras desaparecen de nuevo.

Por ejemplo, utilice <meta name=”viewport” content=”width=1024, minimal-ui”> .


actualizar: He confirmado que este método funciona en iOS 7.1 (versión final oficial). Usted puede confirmar por sí mismo con mi aplicación web que utiliza la solución de la metaetiqueta descrita anteriormente.

enter image description here

1voto

Timmy Puntos 11

He visto esto recomendado <meta name="apple-mobile-web-app-capable" content="yes"> Ejecuta el sitio en modo autónomo, lo que oculta la interfaz de usuario. No tengo claro cómo se compara esto con la solución minimal-ui anterior. Tengo la impresión de que esta solución también funciona para las versiones de iOS anteriores a la 7.1.

AppleAyuda.com

AppleAyuda es una comunidad de usuarios de los productos de Apple en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X