javascript - que - preferencias safari iphone

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

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

Después del 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 forzar al usuario a:

Girar el dispositivo
Desplazarse por la página
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: iOS7.1 ahora se ha lanzado, por lo que se ha eliminado el NDA.

<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 hacer 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">

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

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

Espero que esto ayude a alguien, pero no quería configurar el ancho de mi ventana = ancho del dispositivo ... porque es 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 cambiando 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 funcionó para mí, 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 minimal-ui, era prácticamente imposible de resolver.

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

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

Pero repito: no lo use si está desarrollando una aplicación web para el público en general. Es terrible para UX obligar a su usuario a descargar un navegador diferente para acceder a la aplicación.

ACTUALIZAR

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

Use una vista web dentro de Titanium desde el acelerador. No será aprobado en la tienda de Apple, pero para un evento privado, ¡funcionará perfectamente!

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

 <meta name="apple-mobile-web-app-capable" content="yes">  <meta name="apple-mobile-web-app-status-bar-style" content="black">

Esto superimpone los indicadores sobre tu 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

ACTUALIZACIÓN : hay una meta propiedad para arreglar 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 característica se encuentra actualmente en Beta 2.

Actualización de septiembre de 2014: iOS 8 ha eliminado la función minimal-ui . De nuevo, no hay manera de eliminar / ocultar las barras de navegación, salvo confiar en el comportamiento predeterminado del navegador (las barras se ocultarán al desplazarse, pero solo si el elemento de desplazamiento es el BODY de la página). La única "solución alternativa" es guardar la aplicación en la pantalla de inicio y tener las metaetiquetas adecuadas establecidas (ver a continuación).

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

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

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

Este nuevo indicador de vista oculta la interfaz de usuario de Safari de forma predeterminada (solo se muestran una pequeña barra de título con URL e indicador de SSL). Para acceder a la IU de Safari, los usuarios deben tocar activamente esta barra de título.

Tenga en cuenta que en iOS 7.0.x, no hay API o solución conocida para esto. En esas versiones, si desea ocultar el navegador Chrome de Safari de forma permanente, necesita hacer que el usuario agregue la aplicación web a la pantalla de inicio (con las metaetiquetas adecuadas configuradas <meta name="apple-mobile-web-app-capable" content="yes"> ) o utilice algún tipo de envoltorio de aplicación nativa como Phonegap y distribúyalo 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 forma más permanente sería que Mobile Safari sea compatible con la API de pantalla completa HTML5 (que es compatible con Safari en OS X). Por desgracia, no hay soporte en este momento y, históricamente, los lanzamientos de iOS no agregaron nuevas características de Safari, así que tal vez sea algo para iOS 8.

EDICION 2:

No funciona desde iOS 7.1

EDITAR:

Algunos juegos han adoptado una superposición que insinúa al jugador que se desplace de las barras y luego bloquea el desplazamiento hasta que salgan las barras nuevamente. En este caso, la position: fixed ayuda mucho, ya que estabiliza el movimiento (no se puede explicar mejor, solo tiene que probarlo por usted mismo). Este juego es un buen ejemplo de tal 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 área 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 here .

NOTA : La nueva opción minimal-ui es una gran solución, pero debe ser parte de la respuesta HTML. Intenté 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".