1

How to make address bar always visible on mobile browsers?

I try many of solutions like getting the body height and added it as CSS at HTML and body like this:

$("html, body").css({
   height: $(window).height()
});

And I try also something likes this:

window.scrollTo(0, 1);

But nothing change.

  • 4
    _“How to make address bar always visible on mobile browsers?”_ - not at all …? How, where and when the address bar is displayed is something I configure in my mobile browser. Why should you be able to mess with that? – CBroe Mar 15 '17 at 12:27
  • Comedown ok? When you scroll down the address bar hidden by default this causes some issues with me. –  Mar 15 '17 at 12:49
  • 1
    Then you need to fix what _makes_ this an issue. – CBroe Mar 15 '17 at 12:51

1 Answers1

1

The other solutions on stackoverflow (such as this one) talk about preventing the body from scrolling. You are setting the body height, which is good, but the body still has a scrollbar. Try:

  • Setting the body overflow to hidden.
  • Adding a new div that is height: 100%; and overflow: auto. Put the entire page inside this div. The div will have the scrollbar instead of the body. (Read the linked solution carefully).

Now, reasons I would discourage this:

  1. Users will hate you if you break the workflow they are used to. It is almost never the right thing to do.
  2. Scrolling the body is always much faster than a div scrolling. You will see very noticeable performance decreases if the page is very big at all.

Update: Address bar being moved

Chrome on Android is experimenting with moving the address bar down to the bottom of the screen to be more accessible for single-hand use. This is a great example of why a web page should never try to add hacks to work around browser behavior.

JosiahDaniels
  • 2,411
  • 20
  • 37