(learning html/css)
I designed a very simple webpage (with some help) that has a fixed responsive margin around the viewport (screen). The problem is that in mobile browsers, the address bar pushes the page down, so the bottom margin is hidden. I want to prevent the address from hiding, and hopefully, I create a fully fixed image. I was already able to lock zooming with this on the
github repo: enter link description here
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I believe that locking the address bar is possible because Fvckrenderverse has it locked on mobile, I want to do the same.
I tried adding this to the but the problem now is that it crops the margins top/bottom, but the address bar is locked at least. How do I lock it without cropping margins?
<style type="text/css">
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
I've tried this script as well but nothing changed, address still hides on mobile. I've tried other.
<script>
function scrollWin() {
window.scrollTo(0, 0);
}
</script>
See, on the top/bottom, the margin has been cropped, where it is supposed to had a 20px white margin, like the sides. Here, the address bar is locked as I wish.
So I found the answer, asked it on reddit. You can check the solution here Basically, you add this to the tag like I had, to lock the address bar:
<script> function scrollWin() { window.scrollTo(0, 0);} </script>
Then in the tag you change:
from:
width: calc(100vw - 40px);
height: calc(100vh - 40px);
...to...
width: calc(100% - 40px);
height: calc(100% - 40px);
(change from vw/vh to %)
Simple answer!