Corrección de CSS para 100vh en WebKit móvil

 

 

 

Una respuesta sorprendentemente común cuando se pregunta a la gente sobre cosas que arreglarían en CSS es mejorar el manejo de las unidades de ventana gráfica.

Una cosa que surge a menudo es cómo se relacionan con las barras de desplazamiento. Por ejemplo, si un elemento tiene un tamaño 100vwy se extiende de borde a borde, es bueno siempre que la página no tenga una barra de desplazamiento vertical. Si tiene una barra de desplazamiento vertical, entonces 100vwes demasiado ancha y la presencia de esa barra de desplazamiento vertical activa una barra de desplazamiento horizontal porque las unidades de ventana gráfica no tienen una forma elegante/opcional de manejar eso. Por lo tanto, es posible que esté ocultando el desbordamiento en el cuerpo cuando, de otro modo, no sería necesario, por ejemplo. ( Demostración )

 

Otro escenario involucra a los navegadores móviles. Puede utilizar unidades de ventana gráfica para ayudarle a colocar un pie de página fija en la parte inferior de la pantalla. Pero entonces puede aparecer Chrome en el navegador (por ejemplo, navegación, teclado, etc.) y puede cubrir el pie de página, porque el navegador móvil no considera ningún cambio en el tamaño de la ventana gráfica.

Matt Smith documenta este problema:

Y una especie de solución:

body { min-height: 100vh; min-height: -webkit-fill-available;}html { height: -webkit-fill-available;}

Lo anterior se actualizó para garantizar que el htmlelemento se estuviera utilizando, ya que nos dijeron que Chrome está actualizando el comportamiento para que coincida con la implementación de Firefox.

¿Esto realmente funciona? […] No he tenido problemas con ninguna de las pruebas que he realizado y estoy usando este método en producción ahora mismo. Pero recibí una serie de respuestas a mi tweet que señalaban otros posibles problemas con el uso de esto (los efectos de los dispositivos giratorios, Chrome no ignora completamente la propiedad, etc.) Mejores Opiniones y reviews

Sería mejor obtener alguna solución real para varios navegadores para esto algún día, pero no veo ningún problema al usar esto como una mejora. Es extraño utilizar una propiedad con prefijo de proveedor como mejora progresiva, pero bueno, el mundo es extraño.

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Corrección de CSS para 100vh en WebKit móvil

Corrección de CSS para 100vh en WebKit móvil

Una respuesta sorprendentemente común cuando se pregunta a la gente sobre cosas que arreglarían en CSS es mejorar el manejo de las unidades de ventana gráfi

programar

es

https://aprendeprogramando.es/static/images/programar-correccion-de-css-para-100vh-en-webkit-movil-1503-0.jpg

2024-06-13

 

Corrección de CSS para 100vh en WebKit móvil
Corrección de CSS para 100vh en WebKit móvil

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences