Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable hiding of address bar on mobile

I'm working on a mobile website which has "pages" that have div's which take up the screens full size and you can scroll between each one. The problem is, the window resizes whenever a user scrolls downward because the address bar hides. This causes problems when you scroll to the complete bottom and the address bar then hides.

Is it possible to have the address bar always show on mobile devices?

like image 820
Randy Avatar asked Apr 19 '14 00:04

Randy


People also ask

How do I hide the address bar in Chrome mobile?

To get started enter “about:flags” into the Address Bar and hit Enter. Scroll down until you see the listing for Compact Navigation. Enable it and let the browser restart to gain access to the feature. Once the browser has restarted right click on one of the tabs and select Hide the toolbar from the Context Menu.

How do I make my browser bar disappear?

As discussed earlier, hitting the F11 or Fn + F11 key will automatically switch Chrome to full-screen mode to auto hide the address bar, and the bookmarks and tabs.

How do I hide the address bar in HTML?

16384.0 you can hide the address bar by setting location=no in the window. open features. Save this answer.


2 Answers

You can wrap your HTML with div and do something like this: http://jsfiddle.net/DerekL/Fhe2x/show

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

It works on Android and iOS.

like image 53
Derek 朕會功夫 Avatar answered Oct 09 '22 09:10

Derek 朕會功夫


The simplest way to achieve this is to scroll in a container, rather than scrolling the document.

E.g.:

<html><body>
  <div id="scrollable-content"> ... all your content here ... </div>
</body></html>

html, body {
  height: 100%;
}

#scrollable-content {
  height: 100%;
  overflow-y: scroll;
}
like image 3
Bogdan Mihai Avatar answered Oct 09 '22 08:10

Bogdan Mihai