CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
kristof_w
kristof_w

Reputation: 302

How to hide address bar in mobile web app?

I'm creating a mobile web app (not native), and I want to use the complete screen height for my application. The problem is that the address bar of the browser takes up a lot of space, leaving me with about 4/5 of the entire screen.

I've made my app so that there's never any scrolling, the site always fits the height of the user's screen. What I'm really after, is what the facebook mobile website does. It scrolls down to hide the address bar.

Is there any universal way of doing this, for Android devices as well as Iphone, and in different mobile browsers (different address bar sizes)?

BTW: I'm using Iscroll4 to get a fixed footer and header.

EDIT: This is the code I ended up with. I added two button to let the user choose whether or not to use fullscreen mode. This code works in combination with Iscroll4 and Jquery.

<script type="text/javascript">
$(document).ready(function() {
    var fullscreen = false;

    if(fullscreen==false)
    {
        window.removeEventListener("orientationchange", function(){ hideAddressBar(); } );
        window.addEventListener("orientationchange", function(){ showAddressBar(); } );
    }
    else
    {
        window.removeEventListener("orientationchange", function(){ showAddressBar(); } );
        window.addEventListener("orientationchange", function(){ hideAddressBar(); } );
    }

    $('#fullscreen').click(function(){
       hideAddressBar();
       fullscreen = true;
    });
    $('#normalscreen').click(function(){
       showAddressBar();
       fullscreen = false;
    });

});
function hideAddressBar()
{
    document.body.style.height = (window.outerHeight + 20) + 'px';
    window.scrollTo(0, 1);
}
function showAddressBar()
{
    document.body.style.height = (window.outerHeight - 20) + 'px';
    window.scrollTo(0, 0);
}

Upvotes: 0

Views: 5031

Answers (4)

styler
styler

Reputation: 16521

You can find a good article on how this is achieved here http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

Sample script

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

      setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
  }
}

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );

Upvotes: 2

GoSmash
GoSmash

Reputation: 1108

Try this,

For android:

if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
 }

For iPhone:

<meta name="apple-mobile-web-app-capable" content="yes" />

Upvotes: 0

Andrew Stephens
Andrew Stephens

Reputation: 10203

The "scroll down" javascript trick should work on both iPhone and Android:

http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

Not sure about other mobile browsers though sorry. Are you talking about Blackberry, Windows phone, etc. or more basic phones?

Upvotes: 2

Nick
Nick

Reputation: 6346

The way I usually do this is:

window.addEventListener("load",function() {
  setTimeout(function(){
    window.scrollTo(0, 1);
  }, 0);
});

But it will only work if the page is long enough to scroll down a bit.

Upvotes: 1

Related Questions