No creo que hay alguna solución para ocultar las barras de programación con javascript/css/html, pero permítanme tratar de describir un problema. Somos el equipo de los desarrolladores de juegos móviles y hemos estado desarrollando un juego para un año.

Después de que iOS 7 anuncio que hemos enfrentado el problema de que es IMPOSIBLE ocultar las barras de navegación. Una vez que el usuario pulsa en la parte superior o la parte inferior del navegador Safari, barras de navegación están apareciendo de nuevo y ocultar todos los controles del juego.

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

  1. Gire el dispositivo de
  2. Desplazarse por la página
  3. Agregar la aplicación a Casa-pantalla

Ninguna de estas alternativas es aceptable. Parece que Apple es consciente de este problema, pero que sigue haciendo caso omiso de ella. Han cerrado un reporte de bug como un duplicado de la bug #14076889.

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

InformationsquelleAutor asv2001 | 2013-09-13

8 Comentarios

  1. 118

    Actualización de septiembre de 2014: iOS 8 ha eliminado la minimal-ui característica
    Que hay de nuevo no hay manera de eliminar/ocultar las barras de navegación de otra que confiar en el comportamiento predeterminado del explorador (barras se oculta cuando el desplazamiento, pero sólo si el desplazamiento del elemento es el BODY de la página). La única «solución» es salvar a la aplicación a la pantalla de inicio y de tener el meta tags set (ver más abajo).

    Actualización de agosto de 2014: iOS 8 (beta) ya no admite minimal-ui.
    No hay ninguna solución. (La razón de esto es probablemente debido al abuso por parte de los sitios web que se utiliza para intentar evitar que la gente de dejar de navegar, aunque puede haber nuevas características de iOS 8 Safari, que no se han hecho públicos pero que reemplazar minimal-ui.)

    iOS 7.1 añadido una nueva API para resolver este problema:

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

    Este punto de vista bandera oculta el Safari de la interfaz de usuario por defecto (sólo una pequeña barra de título con la dirección URL de SSL y el indicador se muestra). Para acceder a la interfaz de usuario de Safari, los usuarios deben activamente toque esta barra de título.

    Nota que en iOS 7.0.x, no hay API o solución conocida para esto. En esas versiones, si desea ocultar de Safari en el navegador chrome de forma permanente que necesita para hacer bien el usuario para agregar la aplicación web a la pantalla de inicio (con la correspondiente meta tags set <meta name="apple-mobile-web-app-capable" content="yes">) o utilizar algún tipo de app nativa de contenedor como Phonegap y distribuir a través de la App Store.

    Personalmente, me gustaría que no me quitaron la «pantalla completa» botón se introdujo en el modo de paisaje en iOS 6 Mobile Safari, que fue una gran solución que hicieron los desarrolladores y usuarios felices.

    Un candidato perfecto para que esto se resuelva de forma más permanente sería para Móvil de Safari para apoyar el HTML5 pantalla completa API (que se apoya en un Safari en OS X!). Por desgracia, no hay apoyo de la derecha y ahora históricamente iOS punto de versiones no añadir nuevas prestaciones de Safari, así que tal vez algo para iOS 8.

    • ¿Esta cadena («mínimo-interfaz de usuario») deben ser parte de la página HTML cuando se recibe desde el servidor o es posible modificar la ventanilla sobre la marcha y agregar / quitar esa cadena de JavaScript?
    • Tenga en cuenta que iOS 8 Beta4 ha eliminado el soporte para minimal-ui, developer.apple.com/library/prerelease/ios/releasenotes/General/…, es posible que no habrá manera de controlar Mobile Safari comportamiento por defecto en el futuro. stackoverflow.com/questions/24889100/…
    • Exactamente la información que necesitaba. Aquí está la esperanza de que el apoyo de la API de pantalla completa cada vez que van a dejar de usar la mínima-interfaz de usuario.
    • ¿Qué acerca de iOS9?
    • Para iOS9 puede utilizar un mínimo de-interfaz de usuario de la emulación. Por ejemplo: stackoverflow.com/a/26884561/2764408
    • ¿Qué acerca de iOS10? Parece que no puede encontrar una solución viable en absoluto.

  2. 17

    ACTUALIZACIÓN: Hay una meta property para la fijación de este actualmente en iOS7.1 Beta según este post del foro en las notas de la versión.

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

    He corrido una prueba y puede confirmar esta característica está actualmente en Beta 2.

  3. 6

    NOTA: El nuevo mínimo-opción de interfaz de usuario es una gran solución, sino que debe ser parte de la respuesta HTML.
    He intentado en iOS7.1 beta3 para anexar el área de visualización de la etiqueta meta con JS

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

    el valor «mínimo-interfaz de usuario» es ignorado por el navegador.

    • Usted necesita para establecer a true: mínimo-ui=1, por Lo que esta vez: <meta name=»viewport» content=»width=device-width, user-scalable=0, minimal ui=1″>
    • Eso no es cierto. <meta name="viewport" content="width=device-width, minimal-ui"> funciona bien en el iPhone 5 de mi prueba, así como en el Simulador de iOS.
    • una vez establecido que, ¿cómo se puede eliminar el uso de jQuery?
    • ¿Desea quitar con jQuery todo el viewport o simplemente mínima-interfaz de usuario?
  4. 3

    Actualización: iOS7.1 ahora ha sido lanzado para el NDA se ha levantado.

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

    Es la correcta etiqueta y trabaja en la liberación en vivo. Recuerda que el «viewport» puede apoyar una lista separada por comas si se requiere.

    La combino con otros móviles de las variables para hacer el sitio web sentir como una aplicación:

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

    Hemos estado luchando con este también. Tenemos un TabBar en nuestro sitio y cada vez que intento hacer clic en una pestaña de safari controles de la ventana emergente.

    Hoy la esperanza. Si usted es un miembro del programa de desarrolladores de apple, me gustaría sugerir fuertemente que visitan este foro: https://devforums.apple.com/message/927476

    W

    • Disculpas por no publicar una respuesta oficial. Apple notas de la versión están todavía bajo NDA. Pero recuerde que debe estar ejecutando la versión correcta de iOS para que se produzcan los cambios.
  5. 2

    EDIT 2:

    No funciona desde iOS 7.1

    EDICIÓN:

    Algunos juegos han adoptado una superposición que consejos al jugador a desplazarse lejos de los bares y, a continuación, bloquea el desplazamiento hasta las barras de pop de nuevo. En este caso position: fixed ayuda mucho, ya que estabiliza el movimiento (no se puede explicar mejor, sólo tienes que probarlo por ti mismo). Este juego es un buen ejemplo de este enfoque:

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

    Recientemente también he tropezado con un hack que desactiva la barra de navegación de la activación de la parte superior de la zona. Todo lo que tienes que hacer es agregar un elemento aleatorio a su DOM con los siguientes estilos:

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


    Leer más sobre esto aquí.

    • Por favor, mostrar la comentó solución aquí con sus pensamientos.
  6. 1

    Si va a crear una web-app, usted puede crear un enlace a la URL desde la pantalla de inicio; y usar las siguientes Etiquetas HTML Meta:

    <!-- 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 super-imposición de los indicadores sobre su encabezado y la barra de navegación. (Los indicadores que puedes ver en todas las pantallas de iPad.

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

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

  7. 0

    Esperemos que esto ayude a alguien, pero no me quiero poner a mi ventanilla width=device-width.. porque su 480px en el iphone 4.. y quiero que mi juego sea en 800px para todos los dispositivos.

    Y si no lo es, entonces mínimos-interfaz de usuario no se registre.

    Mi trabajo alrededor está haciendo:

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

    Y, a continuación, cambiar el área de visualización una vez cargada la página:

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

    Estoy bastante sorprendido de que funciona. La barra de direcciones y la inferior de la interfaz de usuario botones sólo aparecen si el usuario hace clic en la parte superior/parte inferior de la pantalla. El amor es ahora.

    • Si usted sólo tiene que utilizar <meta name=»viewport» content=»minimal ui»> se está trabajando bien
    • No funciona hoy en día.
  8. 0

    Esta solución funcionó para mí, pero en mi caso, la webapp fue para
    un público privadas, donde tenía el control de la Ipad, que sería usado.

    Traté de usar todas las posibles etiquetas meta y hacks, y realmente, después de
    IOS8 ha quitado la mínima-característica de la interfaz, era prácticamente imposible de resolver.

    Pensar fuera de la caja, nuestro equipo llegó a una solución agradable:

    El Mercurio navegador se abrirá en pantalla completa, e incluso cuando las páginas
    están siendo cargada, la barra de direcciones no aparecen.
    Es un pequeño icono en la parte inferior derecha y sólo 🙂
    Funcionó a la perfección para nuestro problema!

    Pero repito: no lo use si usted es el desarrollo de una webapp para el público en general.
    Es terrible para la experiencia de usuario de la fuerza de su usuario a descargar un navegador diferente
    para acceder a la aplicación.

    ACTUALIZACIÓN

    Un desarrollador amigo mío con esta solución:

    Utilizar un webview en el interior de Titanium de appcelerator.
    No va a ser aprobado en la tienda de Apple, pero para un evento privado, que va a funcionar muy bien!

Dejar respuesta

Please enter your comment!
Please enter your name here