Menu
I've got some trouble on resizing elements when the Android's Google Chrome address bar is masked. This issue appeared only some week ago.
I set the height of my html and my body to 100% and my elements are positioned in absolute. When I mask the address bar, the html element does not take 100% of the height, so its children are not placed correctly.
Here is an example :
html{
height: 100%;
}
body{
background-color: #11afa5;
height: 100%;
}
.secondary{
position: absolute;
width: 50px;
height: 50px;
background-color: #38d025;
}
#BR{
top: 75%;
transform: translate(0,-25%);
right: 15px;
}
#MR{
top: 50%;
transform: translate(0,-50%);
right: 15px;
}
#TR{
top: 25%;
transform: translate(0,-75%);
right: 15px;
}
#BL{
top: 75%;
transform: translate(0,-25%);
left: 15px;
}
#ML{
top: 50%;
transform: translate(0,-50%);
left: 15px;
}
#TL{
top: 25%;
transform: translate(0,-75%);
left: 15px;
}<body>
<div class="secondary" id="TL">TL</div>
<div class="secondary" id="ML">ML</div>
<div class="secondary" id="BL">BL</div>
<div class="secondary" id="TR">TR</div>
<div class="secondary" id="MR">MR</div>
<div class="secondary" id="BR">BR</div>
</body>And here are screenshots on Android:
With the address bar
Address bar is masked
On the second screenshot, we can clearly see with the Chrome's debugger that the html does not take 100% of the page height.
I'm almost sure it has not this behaviour 3 or 4 weeks ago.
Do you have any idea to make it work correctly?
EDIT :
Another strange thing : I added a little script that resizes the html element accordingly to the window.
<script>
function resize (){
document.getElementsByTagName("html")[0].style.height = ''+window.innerHeight+'px';
}
resize();
window.onresize = resize;
</script>The html is correctly resized, but the elements are not replaced.
I don't really understand this behaviour, since the elements are positioned relative to their parent, which is the body, that fits 100% in the window height.
611
So to resize properly on mobile, you need to assign the DEVICES width and height not just any width and height. You can go into your HTML file(s) and add in the head section:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and
<meta name="viewport" content="height=device-height, initial-scale=1.0">
Hope this works!!
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
