javascript - queries - media query ipad css

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

Question

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

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

Un enfoque común para el problema es tener un divisor envoltorio que llena la ventana del navegador, configurar el overflow como hidden o auto , y luego desplazarse horizontal y / o verticalmente dentro de él.

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

Existen numerosos hacks y propiedades de ventana gráfica 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 había eliminado minimal-ui de Mobile Safari (ver la sección de Webkit en iOS 8 Release Notes ), lo que nos dejó pensando:

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

Por lo que sabemos, iOS 7 ya no responde a la función window.scrollTo piratear, esto sugiere que tenemos que vivir con el espacio de pantalla más pequeño, a menos que adoptemos un diseño vertical o usemos aplicaciones mobile-web-app-capable .

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

Me refiero a la pantalla completa suave sin usar la metaetiqueta mobile-web-app-capable .

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

minimal-ui solía ser el punto medio, ocultando el menú por defecto pero manteniéndolo accesible con un toque , aunque Apple podría haberlo eliminado debido a otras preocupaciones de accesibilidad (como que los usuarios no supieran 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 pronto, pero incluso si lo es, no veo cómo se mantendrá accesible el menú (lo mismo vale para Chrome en Android).

En este caso, tal vez deberíamos dejar el safari móvil tal 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 OS, la barra de direcciones y el menú de navegación; más viejo, es 372).

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

Answer 1

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

Es cierto, el minimal-ui podría ser tanto útil como dañino, 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 soluciones, 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 cuál es el espacio real que tienes para tu aplicación.

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

EDITAR

Cómo lo hago

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

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

Entonces:

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

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

Vea la demostración (en un iPhone)

Como nota al margen: esta aplicación también es destacable, ya que utiliza un enrutamiento interno para direcciones hash, pero también agregué un indicador de usuarios de iOS para agregar a casa. Me siento de esta manera ayuda a la lealtad y a los visitantes que regresan (y por eso el espacio perdido está de vuelta).

Answer 2

Debido a que no existe una forma programática de imitar minimal-ui , hemos llegado a una solución diferente, usando calc() y la altura conocida de la barra de dirección de iOS para nuestra ventaja:

La siguiente página de demostración ( también disponible en esencia, más detalles técnicos allí ) pedirá al usuario que se desplace, lo que luego activará una pantalla completa (oculte la 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>

Answer 3

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

Como ya descubriste, 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 debe aplicarse condicionalmente, por ejemplo, con sniffing UA agregando una clase gt-ios8 a <html> .

Answer 4

Encontré esta solución de @doublesharp y me ha funcionado de maravilla, así que pensé en compartirla aquí:

// track width, set to window width
var width = $(window).width(); 

// fire on window resize
$(window).resize(function() {
    // do nothing if the width is the same
    if ($(window).width()==width) return; 
    // ... your code
});

Por lo tanto, para algo como la barra de direcciones de iOS 8, cuando se desplaza hacia abajo, el cambio de tamaño de la barra de direcciones no activará su código $ (ventana) .resize ().

Answer 5

La forma 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 Paisaje, pero eso es todo lo que necesitaba.

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

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

Answer 6

La propiedad viewport minimal-ui ya no es compatible con iOS 8. Sin embargo, el mínimo-ui en sí no se ha ido. El usuario puede ingresar al minimal-ui con un gesto de "tocar y arrastrar hacia abajo".

Existen varias precondiciones y obstáculos para administrar el estado de la vista, por ejemplo, para que el mínimo de trabajo funcione, tiene que haber suficiente contenido para permitir al usuario desplazarse; para que el mínimo-ui persista, el desplazamiento de la ventana se debe compensar en la carga de la página y después del cambio de orientación. Sin embargo, no hay forma de calcular las dimensiones del ui mínimo utilizando la variable de screen , y por lo tanto, no hay forma de saber cuándo el usuario está en el ui mínimo de antemano.

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 la rueda de ardilla se usa para dar espacio al usuario para desplazarse. La presencia del elemento de cinta de correr asegura que el usuario pueda ingresar a la vista de ui mínimo 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 ui mínimo (la página que ha estado previamente en minimal-ui y ha sido recargada permanecerá en el mínimo-ui si la altura del contenido es mayor que la altura de la ventana gráfica).

Cuando la página está en el mínimo-ui, Brim deshabilitará el desplazamiento del documento (lo hace de una manera segura que no afecta el contenido del elemento principal). Al deshabilitar el desplazamiento de documentos se evita accidentalmente dejar el ui mínimo cuando se desplaza hacia arriba. Según la especificación original de iOS 7.1, al tocar la barra superior se recupera el resto del cromado.

El resultado final se ve así:

Por el bien 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 mínimo ui inmediatamente después del evento de orientationchange porque window dimensiones de la window no reflejan la nueva orientación hasta la animación de rotación ha terminado. Tienes que adjuntar un oyente al evento orientationchangeend .

Scream y orientationchangeend se han desarrollado como parte de este proyecto.

Answer 7

No he hecho diseño web para iOS, pero de 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á y contraerá automáticamente para mostrar más contenido.

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

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

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

Answer 8

Quiero comentar / parcialmente responder / compartir mis pensamientos. Estoy usando la técnica de desplazamiento overflow-y: para un próximo gran proyecto mío. Usarlo tiene dos ventajas MAYORES.

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. Además, la forma en que funciona esto causa problemas con los modales que tienen botones en el extremo inferior.

b) Cuando se usa un elemento desbordado, las únicas cosas que se vuelven a pintar en caso de grandes cambios de CSS son las que están en la pantalla visible. Esto me dio una gran mejora en el rendimiento cuando usé javascript para modificar 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 se volverán a pintar y el resto se volverán a pintar al desplazarse. Sin él, los 20 elementos se repintan.

Por supuesto, depende del proyecto y si necesita alguna de las funcionalidades que mencioné. Google usa elementos desbordados para que gmail use la funcionalidad que describí en a). Imo, vale la pena el tiempo, incluso teniendo en cuenta la pequeña altura en los viejos iphones (372px como dijiste).