Search code examples
htmlcssmobile

How can I prevent address bar from hiding in mobile browsers?

(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. enter image description here

Solution

  • 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!