0
425
Vistas100vh de altura cuando se muestra la barra de direcciones - Chrome Mobile
Me encontré con este problema varias veces y me preguntaba si había una solución para este problema. Mi problema ocurre en la aplicación móvil de Chrome. Allí, puedes desplazarte un poco hacia abajo y la barra de direcciones desaparece. Hasta aquí todo bien, pongamos un ejemplo:
La height del contenedor se establece en 100vh .
Como puede ver, la parte inferior se corta.
Cuando me desplazo hacia abajo, se ve así:
Ahora se ve bien. Entonces, obviamente, Chrome calcula la altura de la barra de direcciones en la altura de la ventana gráfica. Entonces mi pregunta es:
¿Hay alguna manera de que se vea igual con o sin la barra de direcciones? ¿Para que se expanda el recipiente o algo así?
8 Respuestas
Responde la pregunta0
Solo quería ampliar un poco la respuesta principal aquí: descubrí que, como Ross Light mencionó anteriormente, desea usar height: 100% para tener en cuenta la barra de direcciones del navegador web. Sin embargo, para que esto funcione, debe configurar la altura de la etiqueta html y la etiqueta del cuerpo igual a la height: 100% o sus divs no se expandirán correctamente:
<!DOCTYPE html> <html> <head> <style> html, body { height: 100%; } .fillViewport { height: 100%; } .redBackground { background-color: red; } </style> </head> <body> <div class="fillViewport redBackground"></div> <body> </html>0
.my-element { height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); }Ahora obtengamos la altura interna de la ventana gráfica en JavaScript:
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit let vh = window.innerHeight * 0.01; // Then we set the value in the --vh custom property to the root of the document document.documentElement.style.setProperty('--vh', `${vh}px`);fuente: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
0
La comunidad aún no tiene un acuerdo estricto sobre cómo deben comportarse los navegadores con el movimiento de los paneles superior, inferior y lateral desde el punto de vista de los desarrolladores.
El problema mencionado en la pregunta es bien conocido:
Todo comenzó con el problema del Webkit de Apple . Uno de los problemas era que los desarrolladores de sitios web usaban
vhpara calcular el tamaño de la fuente (calc(100 / vh * algo)). Si 100vh fuera dinámico, cuando un usuario se desplaza hacia abajo y la barra de direcciones está oculta, entonces el tamaño de la fuente, como cualquier otro elemento enlazado, se distorsionará y producirá una experiencia de usuario muy mala, sin mencionar que será una tarea intensiva de CPU/GPU.
La decisión de Apple fue igualar el tamaño más grande de la pantalla (sin barra de direcciones) a 100vh constantemente . Entonces, cuando se muestra la barra de direcciones y usa una altura de100vh, la parte inferior desaparecerá de la pantalla. Muchos desarrolladores no están de acuerdo con esa decisión y consideran que las unidades de visualización son dinámicas y exactamente iguales a la "ventana de visualización" visible.El equipo de Google Chrome decidió sercompatible con el navegador de Apple y apegarse a la misma decisión.
height: 100%en la mayoría de los navegadores modernos igual a la parte real visible, es decir, la altura varía y depende de si la barra de direcciones está visible u oculta durante el desplazamiento.Las barras pueden aparecer no solo en la parte superior de la pantalla, sino también en la parte inferior (iOS moderno), y un teclado en pantalla puede acortar la vista. Hay una buena demostración para verificar en dispositivos móviles el tamaño real de
100vh vs 100%.
Solución 1
html, body { height: 100%; } .footer-element { position: fixed; bottom: 10px; } Solución 2
Compensa alguna dependencia del vh con la altura de la barra visible igual a "100vh - 100%", cuando la barra esté oculta la diferencia será 0.
html, body { height: 100vh; } .footer-element { position: fixed; bottom: calc(10px + (100vh - 100%)); }0
Acabo de descubrir una manera de cambiar el tamaño del elemento para que la altura no incluya los teléfonos inteligentes sin botón de inicio de Android con la barra de navegación en pantalla Y la barra superior del navegador. Si el contenido es más grande que la pantalla, el elemento debe crecer hasta el tamaño en que pueda caber todo, por eso estoy usando min-height.
EDITAR:
Se agregó un fragmento usando una clase en lugar de cambiar el estilo en JS
// save old window size to adjust only if width changed let oldWidth = window.innerWidth, oldHeight = window.innerHeight; // element to adjust const target = document.querySelector(".vh100"); // adjust the size if window was resized window.addEventListener("resize", handleResize); function handleResize(initial = false) { // the parameter is used for calling the function on page load /* * if the width changed then resize * without this Chrome mobile resizes every time navbar is hidden */ if (window.innerWidth !== oldWidth || initial) { // stretch the target target.classList.add("setting-100vh"); // save height and apply as min height const h = target.clientHeight; target.classList.remove("setting-100vh"); target.style.minHeight = h + "px"; } } // call when page is loaded handleResize(true); * { margin: 0; } .vh100 { background-color: green; } /* * Stretch the element to window borders and save the height in JS */ .setting-100vh { position: fixed; top: 0; bottom: 0; min-height: unset; } <body> <header class="vh100"> <h1>100vh on mobile</h1> </header> <main> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsa officia mollitia facilis esse cupiditate, nisi recusandae quas id enim alias eaque suscipit voluptates laudantium quasi saepe deserunt labore fuga deleniti placeat, necessitatibus quibusdam. Quaerat adipisci provident minima laboriosam modi ullam accusamus error dolores iure ducimus laborum similique distinctio temporibus voluptas nulla quod ipsa, nostrum quam cumque id animi unde consectetur incidunt! Dolorem sed quisquam at cumque. Cumque non nam exercitationem corporis? Minus sed explicabo maiores ipsam ratione. Quam, fugit asperiores nesciunt dolores culpa, numquam blanditiis sint dolorum ex corrupti illo veniam nostrum odio voluptatibus accusantium ullam impedit eligendi voluptates?</p> </main> </body>0
Me encontré con un problema similar y usé esta solución con ReactJS:
import { useLayoutEffect, useState } from 'react'; function useWindowSize() { const [size, setSize] = useState([0, 0]); useLayoutEffect(() => { function updateSize() { setSize([window.innerWidth, window.innerHeight]); } window.addEventListener('resize', updateSize); updateSize(); return () => window.removeEventListener('resize', updateSize); }, []); return size; } Esta función useWindowSize se toma de la vista Rerender en el cambio de tamaño del navegador con React .
Cuando lo usé en mi código, se veía así:
const MessageList = () => { const { messages } = useContext(ChatContext); const [, windowHeight] = useWindowSize(); return ( <div className="messages" style={{ height: windowHeight - 80 - 48, // window - message form - navbar }} > {messages.map((m, i, list) => ( <Message ... /> )} </div> ); };0
Según este artículo oficial en Chrome web , la forma correcta de establecer la altura para llenar la ventana gráfica visible es con height: 100% , ya sea en el elemento <html> o en una position: fixed . Como se describe en el documento, esto garantiza la compatibilidad con Safari móvil y es independiente del tamaño de la barra de URL.
0
Intente usar min-height: -webkit-fill-available . También puede agregarlo por debajo de la height: 100vh como respaldo.
0
puede solucionar el problema de la barra de direcciones configurando la altura: 100% en html y etiqueta del cuerpo y, por supuesto, establecer el margen y el relleno del cuerpo en cero y también puede manejar el desplazamiento en su div principal para un mejor control