0
393
VistasElemento HTML de pantalla completa que se escala con Keyboard en dispositivos móviles
Tengo un elemento DIV que quiero que aparezca en el tamaño completo del navegador, pero tendrá algo de relleno y esquinas redondeadas. Esa parte es fácil, pero quiero que cambie de tamaño cuando se muestre que el teclado tiene el tamaño de la nueva ventana gráfica. Puedo hacer esto muy bien con Javascript usando window.visualViewport.height. El problema es que algunos navegadores no dan exactamente el tamaño correcto, por lo que el DIV no se muestra correctamente. ¿Hay alguna forma de hacer esto con CSS puro o de otra manera que siempre funcione para todos los navegadores?
1 Respuestas
Responde la pregunta0
Una solución sería usar viewport , que es un valor dinámico que representa el área visible actual. vh es alto y vw es ancho, y ambos son iguales al 1% del alto/ancho de la pantalla.
Con este método, cuando se abre el teclado en pantalla, esta área se encoge, al igual que su contenedor.
Primero, agregue esta metaetiqueta, de modo que la ventana gráfica represente el tamaño real del dispositivo y no el tamaño ampliado:
<meta name="viewport" content="width=device-width">A continuación, simplemente configure la altura para usar la altura de la pantalla, con:
height: 100vh; Y si desea deducir una cantidad fija de espacio, puede usar calc , por ejemplo:
height: calc(100vh - 0.5rem)Manifestación
Basado en sus capturas de pantalla, aquí hay un ejemplo:
.container { background: #e3e3e3; border-radius: 0.5rem; height: calc(100vh - 1rem); width: calc(100% - 1rem); margin: 0 auto; } <head> <meta name="viewport" content="width=device-width"> </head> <body> <div class="container"></div> </body>