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

(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).

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í:

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.

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>

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).

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

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>.

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).

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

Es posible obtener una aplicación web ejecutándose en pantalla completa tanto en iOS como en Android, se llama PWA y, después de mucho trabajo, fue la única forma de solucionar este problema.

Los PWA abren una serie de opciones interesantes para el desarrollo que no deben perderse. Ya he hecho un par, consulte este Manual de licitación pública y privada para diseñadores (español). Y aquí hay una explicación en inglés del sitio CosmicJS

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.