iOS 8 eliminó la propiedad de ventana gráfica "minimal-ui", ¿hay otras soluciones de "pantalla completa suave"?

191

(Esta es una pregunta de varias partes, haré todo lo posible para resumir el escenario).

Actualmente estamos creando una aplicación web receptiva (lector de noticias) que permite a los usuarios deslizarse entre contenido con pestañas, así como desplazarse verticalmente dentro de cada contenido con pestañas.

Un enfoque común al problema es tener un contenedor divque llene la ventana gráfica del navegador, configurado overflowen hiddeno auto, luego se desplace horizontal y / o verticalmente dentro de él.

Este enfoque es excelente, pero tiene un inconveniente principal: dado que la altura del documento es exactamente la misma que la del visor del navegador, el navegador móvil no ocultará la barra de direcciones / menú de navegación .

Existen numerosos hacks y propiedades de viewport que nos permiten obtener más espacio en pantalla, pero ninguno es tan efectivo como minimal-ui(introducido en iOS 7.1).

Ayer llegaron noticias de que iOS 8 beta4 se había eliminado minimal-uide Mobile Safari (consulte la sección Webkit en las Notas de la versión de iOS 8 ), lo que nos dejó preguntándonos:

Q1. ¿Todavía es posible ocultar la barra de direcciones en Mobile Safari?

Hasta donde sabemos, iOS 7 ya no responde al window.scrollTohack, esto sugiere que tenemos que vivir con el espacio de pantalla más pequeño, a menos que adoptemos un diseño o uso vertical mobile-web-app-capable.

Q2 ¿Todavía es posible tener una experiencia similar de pantalla completa suave?

Por pantalla completa suave quiero decir realmente sin usar la mobile-web-app-capableetiqueta meta.

Nuestra aplicación web está diseñada para ser accesible, cualquier página se puede marcar o compartir usando el menú del navegador nativo. Al agregar, mobile-web-app-capableevitamos que los usuarios invoquen dicho menú (cuando se guarda en la pantalla de inicio), lo que confunde y antagoniza a los usuarios.

minimal-uisolía ser el término medio, ocultando el menú de forma predeterminada pero manteniéndolo accesible con un toque , aunque Apple podría haberlo eliminado debido a otras preocupaciones de accesibilidad (como usuarios que no saben dónde tocar para activar el menú).

Q3. ¿Vale la pena una experiencia de pantalla completa?

Parece que una API de pantalla completa no llegará a iOS en el corto plazo, pero incluso si es así, no veo cómo se mantendrá accesible el menú (lo mismo ocurre con Chrome en Android).

En este caso, tal vez deberíamos dejar el safari móvil como está, y tener en cuenta la altura de la ventana gráfica (para iPhone 5+, es 460 = 568 - 108, donde 108 incluye la barra del sistema operativo, la barra de direcciones y el menú de navegación; para iPhone 4 o mayor, es 372).

Me encantaría escuchar algunas alternativas (además de crear una aplicación nativa).

bitinn
fuente
consulte stackoverflow.com/questions/18793072/… para obtener más detalles sobre por qué minimal-ui puede ser crucial para algunas aplicaciones.
bitinn
1
Me encontré con el mismo problema en iOS 7, ya que estamos buscando construir una aplicación web con eventos de deslizar / desplazar, pero probé en eventos de desplazamiento en iOS8 Beta 4 y ... funcionan. ios8-scroll-events.heroku.com No estoy seguro de si eso ayuda en absoluto, pero ... tienes eso a tu favor.
Devin McInnis
Me encontré con el mismo problema. Por el momento, solo la "solución" de JavaScript, como la función calc () a continuación es la única respuesta. Mantenga este hilo actualizado, si conoce una mejor decisión. Atentamente.
A1exandr

Respuestas:

86

La propiedad de la vista de la interfaz de usuario mínima ya no es compatible con iOS 8. Sin embargo, la interfaz de usuario mínima en sí misma no ha desaparecido. El usuario puede ingresar la interfaz de usuario mínima con un gesto de "tocar y arrastrar hacia abajo".

Existen varias condiciones previas y obstáculos para administrar el estado de la vista, por ejemplo, para que funcione un mínimo de interfaz de usuario, debe haber suficiente contenido para permitir que el usuario se desplace; para que la interfaz de usuario mínima persista, el desplazamiento de la ventana debe estar desplazado al cargar la página y después del cambio de orientación. Sin embargo, no hay forma de calcular las dimensiones de la interfaz descreen usuario mínima utilizando la variable y, por lo tanto, no hay forma de saber cuándo el usuario está en la interfaz de usuario mínima por adelantado.

Estas observaciones son el resultado de una investigación como parte del desarrollo de Brim - view manager para iOS 8 . La implementación final funciona de la siguiente manera:

Cuando se carga la página, Brim creará un elemento de cinta de correr. El elemento de cinta de correr se utiliza para dar espacio al usuario para desplazarse. La presencia del elemento de la cinta de correr garantiza que el usuario pueda ingresar a la vista de interfaz de usuario mínima y que continúe persistiendo si el usuario vuelve a cargar la página o cambia la orientación del dispositivo. Es invisible para el usuario todo el tiempo. Este elemento tiene ID brim-treadmill.

Al cargar la página o después de cambiar la orientación, Brim está usando Scream para detectar si la página está en la vista de interfaz de usuario mínima (la página que ha estado previamente en la interfaz de usuario mínima y se ha vuelto a cargar permanecerá en la interfaz de usuario mínima si la altura del contenido es mayor que la altura de la ventana gráfica).

Cuando la página está en la interfaz de usuario mínima, Brim deshabilitará el desplazamiento del documento (lo hace de una manera segura que no afecta el contenido del elemento principal). Deshabilitar el desplazamiento de documentos evita accidentalmente abandonar la interfaz de usuario mínima al desplazarse hacia arriba. Según la especificación original de iOS 7.1, al tocar la barra superior se recupera el resto del cromo.

El resultado final se ve así:

Brim en simulador de iOS.

En aras de la documentación, y en caso de que prefiera escribir su propia implementación, vale la pena señalar que no puede usar Scream para detectar si el dispositivo está en una interfaz de usuario mínima inmediatamente después del evento de cambio de orientación porque las windowdimensiones no reflejan la nueva orientación hasta La animación de rotación ha finalizado. Debe adjuntar un oyente al evento de cambio de orientación .

Scream y el cambio de orientación se han desarrollado como parte de este proyecto.

Gajus
fuente
3
Esto es mucho más expansivo que mi respuesta original, marcado como nueva respuesta hasta que llegue una solución aún mejor :)
bitinn
44
¡Parece agradable! ¿Puedo forzar minimal-ui sin el desplazamiento inicial?
INT
50
Esta historia realmente nunca termina. Soy un desarrollador de juegos en HTML y minimal-ui en iOS 7.1 funcionó bien: era la única forma de tener una aplicación que se ejecuta a pantalla completa Y al mismo tiempo poder tocar en la parte inferior de la pantalla. Las soluciones con deslizamiento de página son agradables, pero no lo suficientemente buenas :( Apple, necesitamos una implementación adecuada de la API de pantalla completa para juegos, por favor.
Petr Urban
44
@Petr: No podría estar más de acuerdo. Cuando se anunció esta solución en 7.1, implementamos rápidamente un nuevo flujo de compra de pago que fijó el CTA primario en la parte inferior de la pantalla ... ¡esto funcionó y se convirtió genial! Se sentía muy "nativo" y sin interrupciones. Lo cual creo que es el problema exacto. Si lo piensas bien, a Apple no le conviene que las aplicaciones web se sientan nativas. De hecho, es un conflicto de intereses directo con su monopolio de la App Store. Esta es, en mi opinión, la única razón válida por la que una característica que tiene tanto sentido fue corregida y luego eliminada intencionalmente. # my2Cents :)
Jose Browne
2
@PetrUrban Estoy convencido de que Apple preferiría que publiques tu juego como una aplicación de teléfono que te permita servir en la web. Su reciente decisión de permitir bloqueadores de anuncios para safari cimenta esta idea.
Patrick Gunderson el
20

Como no hay una forma programática de imitar minimal-ui, hemos encontrado una solución alternativa diferente, utilizandocalc() altura de barra de direcciones iOS conocida para nuestro beneficio:

La siguiente página de demostración ( también disponible en GIST, más detalles técnicos allí ) solicitará al usuario que se desplace, lo que luego activará una pantalla completa (ocultar barra / menú de direcciones), donde el encabezado y el contenido llenan la nueva ventana gráfica.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }

        html {
            background-color: red;
        }

        body {
            background-color: blue;
            margin: 0;
        }

        div.header {
            width: 100%;
            height: 40px;
            background-color: green;
            overflow: hidden;
        }

        div.content {
            height: 100%;
            height: calc(100% - 40px);
            width: 100%;
            background-color: purple;
            overflow: hidden;
        }

        div.cover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: none;
        }

        @media screen and (width: 320px) {
            html {
                height: calc(100% + 72px);
            }

            div.cover {
                display: block;
            }
        }
    </style>
    <script>
        var timeout;

        window.addEventListener('scroll', function(ev) {

            if (timeout) {
                clearTimeout(timeout);
            }

            timeout = setTimeout(function() {

                if (window.scrollY > 0) {
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';
                }

            }, 200);

        });
    </script>
</head>
<body>

    <div class="header">
        <p>header</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>
</html>
bitinn
fuente
10

Solo di adiós a minimal-ui (por ahora)

Es verdad, minimal-ui podría ser útil y perjudicial, y supongo que la compensación ahora tiene otro equilibrio, a favor de iPhones más nuevos y más grandes.

He estado lidiando con el problema mientras trabajaba con mi framework js para aplicaciones HTML5. Después de muchos intentos de solución, cada uno con sus inconvenientes, me rendí a considerar que el espacio perdido en iPhones anterior a 6. Dada la situación, creo que el único comportamiento sólido y predecible es uno predeterminado.

En resumen, terminé previniendo cualquier forma de minimal-ui , por lo que al menos la altura de mi pantalla siempre es la misma y siempre sabes qué espacio real tienes para tu aplicación.

Con la ayuda del tiempo, suficientes usuarios tendrán más espacio.


EDITAR

Cómo lo hago

Esto está un poco simplificado, para fines de demostración, pero debería funcionar para usted. Suponiendo que tiene un contenedor principal

html, body, #main {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.view {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

Luego:

  1. luego, con js, configuro #mainla altura a la altura disponible de la ventana. Esto también ayuda a lidiar con otros errores de desplazamiento encontrados tanto en iOS como en Android. También significa que debe tratar sobre cómo actualizarlo, solo tenga en cuenta que;

  2. Bloqueo el desplazamiento excesivo cuando alcanzo los límites del desplazamiento. Este es un poco más profundo en mi código, pero creo que también puedes seguir el principio de esta respuesta para la funcionalidad básica. Creo que podría parpadear un poco, pero hará el trabajo.


Ver la demostración (en un iPhone)

Como nota al margen: esta aplicación también se puede agregar a favoritos, ya que utiliza un enrutamiento interno a direcciones hash, pero también agregué un mensaje a los usuarios de iOS para que agreguen a casa. Siento que de esta manera ayuda la lealtad y los visitantes que regresan (y así el espacio perdido está de regreso).

Francesco Frapporti
fuente
Deshabilitar minimal-ui me parece muy razonable. ¡Por favor, incluya una breve descripción de cómo hacerlo!
István Pálinkás
Tienes razón, agregué un poco de cómo hacerlo. Muchas otras formas funcionarán.
Francesco Frapporti
1
Su demo no funciona en iOS8, según mi iPhone 5.
dmr07
Gracias por hacérmelo saber, debe ser una actualización porque solía funcionar. ¿Estás en safari? ¿Qué quieres decir exactamente con que no funciona?
Francesco Frapporti
7

La manera más fácil que encontré para solucionar esto fue establecer la altura del cuerpo y los elementos html en 100.1% para cualquier solicitud donde el agente de usuario fuera un iphone. Esto solo funciona en modo horizontal, pero eso es todo lo que necesitaba.

html.iphone, 
html.iphone body { height: 100.1%; }

Compruébalo en https://www.360jungle.com/virtual-tour/25

Stephen Garside
fuente
Gracias @Stephen. altura: 100.1% me ayudó. Sin embargo, cuando abrí 360jungle.com/virtual-tour/25 en iPhone (iOS 11.1.1) Safari e hice clic en los botones en la parte inferior, apareció la barra de herramientas y dirección. Esto se debe a que los botones están demasiado cerca del final de la pantalla. Supongo que sería mejor moverlos a otro lugar en modo móvil.
Téwa
2

El problema raíz aquí parece que el safari iOS8 no ocultará la barra de direcciones al desplazarse hacia abajo si el contenido es igual o menor que la ventana gráfica.

Como ya descubrió, agregar algo de relleno en la parte inferior evita este problema:

html {
    /* enough space to scroll up to get fullscreen on iOS8 */
    padding-bottom: 80px;
}
// sort of emulate safari's "bounce back to top" scroll
window.addEventListener('scroll', function(ev) {
    // avoids scrolling when the focused element is e.g. an input
    if (
        !document.activeElement
        || document.activeElement === document.body
    ) {
        document.body.scrollIntoViewIfNeeded(true);
    }
});

El css anterior se debe aplicar condicionalmente, por ejemplo, con UA ​​sniffing agregando una gt-ios8clase a <html>.

Maquinilla de afeitar
fuente
1
¿Qué hace exactamente este JS?
Ben Sinclair
Si se refiere scrollIntoViewIfNeeded, es una derivación no estándar de scrollIntoView( developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView ). Como su nombre lo indica, el método desplaza el elemento a la vista. trueEl parámetro dice alinear la vista con la parte superior del elemento. En efecto, esto debería evitar que te desplaces. Sin embargo, la implementación es defectuosa.
Gajus
1

Quiero comentar / responder parcialmente / compartir mis pensamientos. Estoy usando la técnica overflow-y: scroll para un gran proyecto mío. Usarlo tiene dos ventajas PRINCIPALES.

a) Puede usar un cajón con botones de acción desde la parte inferior de la pantalla; Si el documento se desplaza y la barra inferior desaparece, al tocar un botón ubicado en la parte inferior de la pantalla, primero aparecerá la barra inferior y luego se podrá hacer clic en ella. Además, la forma en que funciona esto causa problemas con los modales que tienen botones en la parte inferior.

b) Cuando se usa un elemento desbordado, las únicas cosas que se repintan en caso de cambios importantes de CSS son las que se muestran en la pantalla visible. Esto me dio un gran aumento de rendimiento cuando uso JavaScript para alterar CSS de múltiples elementos sobre la marcha. Por ejemplo, si tiene una lista de 20 elementos que necesita volver a pintar y solo dos de ellos están en pantalla en el elemento desbordado, solo esos se vuelven a pintar, mientras que el resto se repinta al desplazarse. Sin ella, los 20 elementos se vuelven a pintar.

... por supuesto, depende del proyecto y si necesita alguna de las funciones que mencioné. Google usa elementos desbordados para que gmail use la funcionalidad que describí en a). Imo, vale la pena, incluso teniendo en cuenta la pequeña altura en los iPhones más antiguos (372px como dijiste).

scooterlord
fuente
1

ES posible, usando algo como el siguiente ejemplo que puse junto con la ayuda del trabajo ( https://gist.github.com/bitinn/1700068a276fb29740a7 ) que no funcionó en iOS 11:

Aquí está el código modificado que funciona en iOS 11.03, comente si funcionó para usted.

La clave es agregar algo de tamaño a BODY para que el navegador pueda desplazarse, por ejemplo: height: calc (100% + 40px);

Muestra completa a continuación y enlace para ver en su navegador (¡pruebe!)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeHots iOS WebApp Minimal UI via Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }
        html {
            background-color: red;
        }
        body {
            background-color: blue;
            /* important to allow page to scroll */
            height: calc(100% + 40px);
            margin: 0;
        }
        div.header {
            width: 100%;
            height: 40px;
            background-color: green;
            overflow: hidden;
        }
        div.content {
            height: 100%;
            height: calc(100% - 40px);
            width: 100%;
            background-color: purple;
            overflow: hidden;
        }
        div.cover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: none;
        }
        @media screen and (width: 320px) {
            html {
                height: calc(100% + 72px);
            }
            div.cover {
                display: block;
            }
        }
    </style>
    <script>
        var timeout;

        function interceptTouchMove(){
            // and disable the touchmove features 
            window.addEventListener("touchmove", (event)=>{
                if (!event.target.classList.contains('scrollable')) {
                    // no more scrolling
                    event.preventDefault();
                }
            }, false); 
        }

        function scrollDetect(event){
            // wait for the result to settle
            if( timeout ) clearTimeout(timeout);

            timeout = setTimeout(function() {
                console.log( 'scrolled up detected..' );
                if (window.scrollY > 35) {
                    console.log( ' .. moved up enough to go into minimal UI mode. cover off and locking touchmove!');
                    // hide the fixed scroll-cover
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';

                    // push back down to designated start-point. (as it sometimes overscrolls (this is jQuery implementation I used))
                    window.scrollY = 40;

                    // and disable the touchmove features 
                    interceptTouchMove();

                    // turn off scroll checker
                    window.removeEventListener('scroll', scrollDetect );                
                }
            }, 200);            
        }

        // listen to scroll to know when in minimal-ui mode.
        window.addEventListener('scroll', scrollDetect, false );
    </script>
</head>
<body>

    <div class="header">
        <p>header zone</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>

Enlace de ejemplo completo aquí: https://repos.codehot.tech/misc/ios-webapp-example2.html

Congelación de código
fuente
-3

No he hecho diseño web para iOS, pero por lo que recuerdo haber visto en las sesiones de WWDC y en la documentación, la barra de búsqueda en Mobile Safari y las barras de navegación en el sistema operativo ahora se redimensionarán y reducirán automáticamente para mostrar más contenido.

Puede probar esto en Safari en un iPhone y notar que, cuando se desplaza hacia abajo para ver más contenido en una página, la barra de navegación / búsqueda se oculta automáticamente.

Quizás lo mejor sea dejar la barra de direcciones / barra de navegación como está, y no crear una experiencia de pantalla completa. No veo que Apple haga eso pronto. Y, a lo sumo, no controlan automáticamente cuándo se muestra / oculta la barra de direcciones.

Claro, está perdiendo espacio en la pantalla, especialmente en un iPhone 4 o 4S, pero no parece haber una alternativa a partir de Beta 4.

iFeli
fuente
1
Conocía esta característica de iOS7 +, pero vea mi explicación anterior: dado que la altura del documento es exactamente la misma que la del navegador, el navegador móvil no ocultará la barra de direcciones / menú de navegación , ya que no se realiza ningún desplazamiento en el nivel del documento.
bitinn
1
Esto puede ser una limitación ahora que Beta 4 ha eliminado esa función. Es posible y probable que Apple controle la barra de direcciones automáticamente y evite que los desarrolladores accedan a ella.
iFeli
8
I haven't done web design for iOS- Si estás haciendo diseño web, lo haces para todas las plataformas. Porque la web está en todas las plataformas.
ProblemsOfSumit
44
@Sumit Sé que trabajar en la web es universal, pero cada navegador y sus marcos subyacentes tienen atributos CSS específicos. Por lo tanto, Chrome puede tener algunos atributos no disponibles para Safari y Firefox, y viceversa.
iFeli