0
953
ViewsEspacio en blanco en la parte inferior de la página después de la rotación del dispositivo en iOS Safari
Tengo un sitio web con una metaetiqueta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
y height:100%; en html y etiquetas body .
Cuando accedo a este sitio desde Safari (iOS 13.5.1) y hago lo siguiente:
- rotar mi dispositivo al modo horizontal
- luego gírelo de nuevo al modo vertical
luego aparece un espacio en blanco en la parte inferior de la pantalla. Este espacio no es parte del código html de la página. Está fuera de la etiqueta html .
Ejemplo mínimo reproducible: https://jsbin.com/cojabiquza
Esto parece estar relacionado con el comportamiento de Safari cuando oculta el panel de direcciones y el panel inferior cuando el dispositivo pasa al modo horizontal. Y cuando vuelve al modo vertical, los paneles se muestran nuevamente, pero el navegador "olvida" recalcular algo y muestra un espacio adicional en la parte inferior de la página.
Eliminar <meta name="viewport"... lo arregla. Pero no puedo deshacerme de él porque tengo un sitio web receptivo. En otros navegadores funciona bien.
Cuéntanos tu experiencia si sabes cómo solucionarlo.
5 answers
Answer question0
Como también estaba buscando una solución a este problema, encontré esta publicación de blog con la siguiente solución:
window.onresize = function() { document.body.height = window.innerHeight; } window.onresize(); // called to initially set the height.0
Después de pasar la mayor parte del día lidiando con esta "característica" (nuevamente), creé una solución solo de CSS para iOS 14.4 en iPad, iPhone y funciona normalmente en todos los navegadores normales. No se requieren hacks. El secreto es usar 100vh en los elementos HTML y BODY, mientras usa position:fixed en su elemento contenedor más externo con todos los bordes sujetos a cero.
Notas: hay un artefacto visual al girar la pantalla si el fondo de su CUERPO es diferente al fondo de su envoltorio. Este mismo problema también le permite colorear la barra de direcciones en la parte superior al darle a BODY un color de fondo diferente (opcional).
HTML, BODY { height: 100%; width: 100%; height: 100vh; width: 100vw; margin:0; padding:0; /* required to prevent rogue scrollbars */ overflow: hidden; /* cosmetic stuff: */ background-color:#5AE; } #wrapper { position:fixed; top:0; left:0; right:0; bottom:0; padding:0; margin:0; /* if you want the content to scroll normally: */ overflow: auto; /* cosmetic stuff: */ background-color:#AEA; border: #6B6 1em solid; box-sizing:border-box; } <html> <head> <meta name="viewport" content="height=device-height, initial-scale=1, width=device-width, initial-scale=1" /> </head> <body> <div id="wrapper"> Content goes here. </div> </body> </html>0
La respuesta de @ Jax-p es válida para el error que describí, pero causa otro problema. Cuando usa 100vh , el contenido comienza a ocultarse detrás de la barra de direcciones:
Entonces, en mi aplicación de la vida real, terminé con un montón de trucos:
document.addEventListener('orientationchange', () => { document.documentElement.style.height = `initial`; setTimeout(() => { document.documentElement.style.height = `100%`; setTimeout(() => { // this line prevents the content // from hiding behind the address bar window.scrollTo(0, 1); }, 500); }, 500); });Este hack soluciona más o menos el problema en iOS Safari 12 y 13
0
Los navegadores móviles suelen ocultar la barra de direcciones y el menú de controles mientras se desplaza (o, en algunos casos, cuando cambia de vertical a horizontal). Puede causar algunos problemas al usar height: 100%; porque a veces el navegador no vuelve a calcular los valores porcentuales de la manera correcta (no suma la altura de la barra de direcciones).
Si desea llenar el 100% de la altura de la ventana gráfica, debe usar height: 100vh; (vh = altura de la ventana gráfica). Espero que ayude.
0
prueba esto:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">