I have an element inside body and it's larger than the screen size. I limited the height of body, so I thought only the width of body would be changed. However, on mobile devices, if you change width larger than the screen width, the height would be changed too..
I'd like to maintain the original body height(100%). Is there a way to maintain the height?
↓The height is weird as you can see.. Chrome Dev Tool picture
This is my code.
<!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>
I found a solution for this post on my own.
All I had to was simply set the following meta tag. height=device-height seems to be the key if you need to do things like this! Hope this post helps people like me... (^o^)
<meta name="viewport" content="height=device-height,width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">