Imposible ocultar las barras de navegación en Safari iOS 7 para iPhone / iPod touch

No creo que haya ninguna solución para ocultar barras mediante programación usando javascript / css / html, pero permítanme intentar describir un problema. Somos el equipo de desarrolladores de juegos para dispositivos móviles y llevamos un año desarrollando un juego.

Tras el anuncio de iOS 7 nos hemos enfrentado al problema de que es IMPOSIBLE ocultar las barras de navegación. Una vez que el usuario toca en la parte superior o inferior del navegador Safari, las barras de navegación vuelven a aparecer y ocultan todos los controles del juego.

La única solución que hemos encontrado hasta ahora es obligar al usuario a:

1. Girar dispositivo
2. Desplazarse por la página
3. Agregar aplicación a la pantalla de inicio

Ninguna de estas alternativas es aceptable. Parece que Apple es consciente de este problema, pero sigue ignorándolo. Han cerrado un error informado como un duplicado del error # 14076889.

Creo que no somos el único equipo que experimenta el mismo problema. ¿Alguien sabe la solución?

Actualización de septiembre de 2014: iOS 8 ha eliminado la minimal-uifunción . De nuevo, no hay forma de eliminar / ocultar las barras de navegación que no sea confiar en el comportamiento predeterminado del navegador (las barras se ocultarán al desplazarse, pero solo si el elemento de desplazamiento es el BODYde la página). La única "solución" es guardar la aplicación en la pantalla de inicio y configurar las metaetiquetas adecuadas (ver más abajo).

Actualización de agosto de 2014: iOS 8 (beta) ya no es compatibleminimal-ui . No hay solución. (La razón de esto probablemente se deba al abuso por parte de los sitios web que lo usaron para tratar de evitar que las personas naveguen, aunque puede haber nuevas funciones en iOS 8 Safari que aún no se han hecho públicas y que reemplazan minimal-ui).

iOS 7.1 agregó una nueva API para resolver este problema:

<meta name="viewport" content="minimal-ui">

Esta nueva bandera de la ventana gráfica oculta la interfaz de usuario de Safari de forma predeterminada (solo se muestra una pequeña barra de título con la URL y el indicador SSL). Para acceder a la interfaz de usuario de Safari, los usuarios deben tocar activamente esta barra de título.

Tenga en cuenta que en iOS 7.0.x, no hay una API ni una solución alternativa conocida para esto. En esas versiones, si desea ocultar el cromo del navegador de Safari de forma permanente, debe hacer que el usuario agregue la aplicación web a la pantalla de inicio (con las metaetiquetas apropiadas establecidas <meta name="apple-mobile-web-app-capable" content="yes">) o usar algún tipo de envoltorio de aplicación nativa como Phonegap y distribuir a través de la App Store.

Personalmente, desearía que no hubieran eliminado el botón de "pantalla completa" que introdujeron en modo horizontal en iOS 6 Mobile Safari, que fue una gran solución que hizo felices a los desarrolladores y usuarios.

Un candidato perfecto para que esto se resuelva de manera más permanente sería que Mobile Safari admita la API de pantalla completa HTML5 (que es compatible con Safari en OS X). Por desgracia, no hay soporte en este momento e históricamente las versiones puntuales de iOS no agregaron nuevas funciones de Safari, por lo que tal vez eso sea algo para iOS 8.

ACTUALIZACIÓN : Hay una metapropiedad para solucionar esto actualmente en iOS7.1 Beta de acuerdo con esta publicación del foro en las notas de la versión.

<meta name="viewport" content="minimal-ui">

He realizado una prueba y puedo confirmar que esta función se encuentra actualmente en Beta 2.

NOTA : La nueva opción de interfaz de usuario mínima es una gran solución, pero debe ser parte de la respuesta HTML. Probé en iOS7.1 beta3 para agregar la metaetiqueta de la ventana gráfica con JS

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

El navegador ignora el valor "minimal-ui".

Actualización: iOS7.1 ya se ha lanzado, por lo que el NDA se ha levantado.

<meta name="viewport" content="minimal-ui">

De hecho, es la etiqueta correcta y funciona en la versión en vivo. Recuerde que "viewport" puede admitir una lista separada por comas si lo necesita.

Lo combino con otras variables móviles para que el sitio web se sienta como una aplicación:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

También hemos estado luchando con este. Tenemos una barra de pestañas en nuestro sitio y cada vez que intentas hacer clic en una pestaña, aparecen los controles de Safari.

Hoy espero. Si es miembro del programa de desarrolladores de Apple, le sugiero que visite este foro: https://devforums.apple.com/message/927476

W

EDITAR 2:

No funciona desde iOS 7.1

EDITAR:

Algunos juegos han adoptado una superposición que sugiere al jugador que se desplace por las barras y luego bloquea el desplazamiento hasta que las barras vuelvan a aparecer. En este caso position: fixedayuda mucho, ya que estabiliza el movimiento (no puedo explicarlo mejor, solo tienes que probarlo por ti mismo). Este juego es un buen ejemplo de este enfoque:

www.paf.com/mobile/launch/flowers.html (lo siento, no puedo publicar más de 2 enlaces)

Recientemente también me encontré con un truco que desactiva la activación de la barra de navegación para el zona superior. Todo lo que tienes que hacer es agregar un elemento aleatorio a tu DOM con los siguientes estilos:

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

Lea más sobre esto aquí .

Si está creando una aplicación web, puede crear un enlace a la URL desde la pantalla de inicio; y utilice las siguientes metaetiquetas HTML:

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Esto superpondrá los indicadores sobre su encabezado / barra de navegación. (Los indicadores que ves en todas las pantallas del iPad.

Para obtener más información, consulte: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Espero que esto ayude a alguien, pero no quería establecer mi viewport width = device-width ... porque es de 480px en el iPhone 4 ... y quiero que mi juego sea de 800px para todos los dispositivos.

Y si no lo configura, entonces minimal-ui no se registra.

Mi trabajo está haciendo:

<meta name="viewport" content="width=device-width, minimal-ui">

Y luego cambiar la ventana gráfica una vez que se carga la página:

  $(window).load(function(){
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  });

Estoy bastante sorprendido de que funcione. La barra de direcciones y los botones inferiores de la IU solo aparecen si el usuario hace clic en la parte superior / inferior de la pantalla. Ámalo ahora.

Esta solución me funcionó, pero en mi caso, la aplicación web era para un público privado, donde tenía el control del Ipad que se usaría.

Traté de usar todas las metaetiquetas y hacks posibles, y realmente, después de que IOS8 eliminó la función de interfaz de usuario mínima, fue prácticamente imposible de resolver.

Pensando fuera de la caja, nuestro equipo llegó a una buena solución:

El navegador Mercury se abre en pantalla completa e incluso cuando las páginas se están cargando, la barra de direcciones no aparece. Es un icono pequeño en la parte inferior derecha y solo :) ¡Funcionó perfectamente para nuestro problema!

Pero repito: no lo uses si estás desarrollando una aplicación web para el público en general. Es terrible que la experiencia de usuario obligue a su usuario a descargar un navegador diferente para acceder a la aplicación.

ACTUALIZAR

A un desarrollador amigo mío se le ocurrió esta solución:

Utilice una vista web dentro de Titanium desde appcelerator. No se aprobará en la tienda de Apple, pero para un evento privado, ¡funcionará bien!