Tengo un elemento dentro del cuerpo y es más grande que el tamaño de la pantalla . Limité la altura del cuerpo, así que pensé que solo se cambiaría el ancho del cuerpo. Sin embargo, en dispositivos móviles , si cambia el ancho más grande que el ancho de la pantalla, la altura también cambiará .
Me gustaría mantener la altura original del cuerpo (100%) . ¿Hay alguna manera de mantener la altura?
↓La altura es rara, como puedes ver... Imagen de Chrome Dev Tool
Este es mi código.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0"> <style> * { box-sizing: border-box; padding: 0; margin: 0; } body, html { max-height: 100%; } #el { width:2100px; color:red; border:2px solid red; } </style> </head> <body> <div id="el">aaaa</div> <script> document.getElementById('el').innerHTML = window.innerWidth + '<br>' + window.innerHeight </script> </body> </html>Encontré una solución para esta publicación por mi cuenta.
Todo lo que tenía que hacer era simplemente configurar la siguiente metaetiqueta. height=device-height parece ser la clave si necesitas hacer cosas como esta. Espero que este post ayude a gente como yo ... (^o^)
<meta name="viewport" content="height=device-height,width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">