CODEWITHSUNDEEP
htmlcssmobile
Metalois
Metalois

Reputation: 77

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

Upvotes: 1

Views: 6446

Answers (3)

Epic Speedy
Epic Speedy

Reputation: 714

I believe I saw an answer to this exact problem somewhere else, but the solution is to use dvh to set the height of the page to full height, which is the dynamic viewport height and actually takes into account the size of the mobile navigation bar.

You simply need to set your body and whatever container you have everything in to height: 100dvh:

body, .container {
    height: 100dvh;
}

This will keep the mobile navigation bar fixed on top, and for your page to not be scrollable - there is absolutely no need for any JavaScript.

Also, it's worth noting many browsers apply margins to the body by default, so your 100% height may produce an unexplainable scrollbar since it's not accounting for the margin, to fix this you just need to reset the margin to 0 for the body:

body {
    margin: 0;
}

Upvotes: 1

johngotit
johngotit

Reputation: 1

I came up with a solution but it comes with a trade-off.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: absolute;
  display: flex;
  inset: 0;
  padding: 1px;
  overflow: hidden;
}

/* All content goes inside this element */
.safe-area-view {
  flex-grow: 1;
  overflow: auto;
}

For some reason the 1px padding is needed to prevent the address bar from collapsing.

Upvotes: 0

Metalois
Metalois

Reputation: 77

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!

Upvotes: 2

Related Questions