CSS3 100vh no constante en el navegador móvil

Para muchos de los sitios que construyo, el cliente pedirá un banner de 100vh y, tal como lo ha encontrado, resulta en una mala experiencia "nerviosa" en el móvil cuando comienza a desplazarse. Así es como resuelvo el problema para una experiencia uniforme y fluida en todos los dispositivos:

Primero establezco mi elemento CSS de banner en height:100vh

Luego uso jQuery para obtener la altura en píxeles de mi elemento banner y aplicar un estilo en línea usando esta altura.

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

Hacer esto resuelve el problema en el móvil dispositivos como cuando se carga la página, el elemento banner se establece en 100vh usando CSS y luego jQuery anula esto poniendo CSS en línea en mi elemento banner que evita que cambie de tamaño cuando un usuario comienza a desplazarse.

Sin embargo, en el escritorio si un usuario cambia el tamaño de la ventana de su navegador, mi elemento banner no cambiará de tamaño porque ahora tiene una altura fija establecida en píxeles debido a la jQuery anterior. Para resolver esto, utilizo Mobile Detect para agregar una clase 'mobile' al cuerpo de mi documento. Y entonces yo envuelva el jQuery anterior en una instrucción if:

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

Como resultado, si un usuario está en un dispositivo móvil, la clase 'mobile' está presente en el cuerpo de mi página y se ejecuta el jQuery anterior. Por lo tanto, mi elemento banner solo obtendrá el CSS en línea aplicado en dispositivos móviles, mientras que en el escritorio la regla CSS original de 100vh permanece en su lugar.

En mi aplicación lo hago así (typescript y postcss anidados, así que cambia el código en consecuencia):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

En tu css:

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

Funciona al menos en Chrome mobile y ipad. Lo que no funciona es cuando agrega su aplicación a la pantalla de inicio en iOS y cambia la orientación un par de veces - de alguna manera los niveles de zoom se meten con el valor innerHeight, podría publicar una actualización si encuentro una solución.

Demo

Acabo de encontrar una aplicación web que diseñé tiene este problema con iPhones y iPads, y encontré un artículo que sugiere resolverlo utilizando consultas de medios dirigidas a dispositivos Apple específicos.

No sé si puedo compartir el código de ese artículo aquí, pero la dirección es esta: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

Salir del artículo: "simplemente haga coincidir la altura del elemento con la altura del dispositivo utilizando consultas de medios que se dirigen a las versiones anteriores de Resolución de iPhone y iPad."

Agregaron solo 6 consultas de medios para adaptar elementos de altura completa, y debería funcionar ya que está completamente implementado CSS.

Editar pendiente: No puedo probarlo ahora mismo, pero volveré e informaré de mis resultados.

Se me ocurrió un componente de React – compruébelo si usa React o explore el código fuente si no lo hace, para que pueda adaptarlo a su entorno.

Establece la altura del div de pantalla completa en window.innerHeight y luego la actualiza en el cambio de tamaño de la ventana.

@nils lo explicó claramente.

¿Qué sigue entonces?

Acabo de volver a usar relative 'classic' % (porcentaje) en CSS.

A menudo es más esfuerzo implementar algo de lo que estaría usando vh, pero al menos, tiene una solución bastante estable que funciona en diferentes dispositivos y navegadores sin problemas extraños de interfaz de usuario.

Como soy nuevo, no puedo comentar otras respuestas.

Si alguien está buscando una respuesta para que esto funcione (y puede usar javascript, ya que parece ser necesario para que esto funcione en este momento), este enfoque ha funcionado bastante bien para mí y también explica el cambio de orientación móvil. Uso Jquery para el código de ejemplo, pero debería ser factible con VanillaJS.

-Primero, utilizo un script para detectar si el dispositivo es táctil o hover. Ejemplo básico:

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

Esto agrega clase al elemento body de acuerdo con el tipo de dispositivo (hover o touch) que se puede usar más tarde para el script height.

- Luego use este código para establecer la altura del dispositivo en la carga y en el cambio de orientación:

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-El tiempo de espera se establece para que el dispositivo calcule correctamente la nueva altura al cambiar de orientación. Si no hay tiempo de espera, en mi experiencia la altura no será correcta. 500ms podría ser un exceso, pero ha funcionado para mí.

- 100vh en hover-dispositivos es un reserva si el navegador anula el CSS 100vh.

Con suerte, esta será una variable de entorno CSS definida por UA como se sugiere aquí: https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046