Hide the Address Bar within Mobile Web Applications

Discussion

1. Juan Velandia

   Thanks!, didn’t know about that meta and works just great :)
2. Michael Tully

   This is a brilliant little script, makes the website look much better, just tried it on a clients site I am doing for them on our testing server and looks brilliant. http://vivimed.planet-group.co.uk

   Couldn’t get the meta tag version to work….

   Would I be right in thinking this will also work on iPad aswell???
• Cody Robertson

  Save the web page as a web clip then open it from the springboard.
• David Walsh

  Yes, it should work well.
3. Kyle Powers

   That’s just plain cool. Javascript FTW. Thanks for the tip!
4. Pablo

   Hi there!!
   I am trying the code in the mobile version of my company. I can´t make it work. Do you know what the problem is?
   Thank you!
5. Jaffe

   Doesn’t seem to be working. have tried all the above steps… Did the new iOS update change things?
6. Michael Tully

   I have the the script version working a treat and works well on a clients website: http://www.vivimedlabs.com I inserted it after my “domready” request on its own line like this..

   if((Browser.Platform.ios) || (Browser.Platform.webos) || (Browser.Platform.android)) {
   	//For iPhone and Andriod To remove Address bar when viewing website on Safari Mobile
   	// When ready...
   	window.addEventListener("load",function() {
   	  // Set a timeout...
   	  setTimeout(function(){
   		// Hide the address bar!
   		window.scrollTo(0, 1);
   	  }, 0);
   	});
   }
   

   This way I stopped it from generating errors.
7. Michael Tully

   P.s I did wrap my code in “” tags but seems to of come up a bit strange.?
8. Michael Tully

   This maybe a bit better to make sure its the Safari Browser you scrolling on, on either platform

   if((Browser.Platform.ios) || (Browser.Platform.webos) && (Browser.safari)) {
     //For iPhone and Andriod To remove Address bar when viewing website on Safari Mobile
     // When ready...
     window.addEventListener("load",function() {
       // Set a timeout...
       setTimeout(function(){
       // Hide the address bar!
       window.scrollTo(0, 1);
       }, 0);
     });
   }
   

   This works for me but if anyone can better the IF statement please fire away
9. Michael Tully

   This maybe a bit better to make sure its the Safari Browser you are scrolling on, on either Mobile Platfrom

   if((Browser.Platform.ios) || (Browser.Platform.android) && (Browser.safari)) {
     //For iPhone and Andriod To remove Address bar when viewing website on Safari Mobile
     // When ready...
     window.addEventListener("load",function() {
       // Set a timeout...
       setTimeout(function(){
       // Hide the address bar!
       window.scrollTo(0, 1);
       }, 0);
     });
   }
   

   This works for me but if anyone can better the IF statement please fire away

   **Mod please delete the 3 above previous post**
10. Jon Raasch

    I just confirmed that it is indeed working in latest iOS. I think the problem people are having is probably that their page isn’t tall enough. If your page is too short to scroll up, the scroll script won’t work.
11. Andrew

    This breaks for me on orientation change – at least in Android’s Browser.
• Brandon Brown

  Could you call the function again on orientation change?

  window.onorientationchange = function() {
      setTimeout(function(){
          window.scrollTo(0, 1);
      }, 0);
  }
  
12. Thad Bloom (@thadbloom)

    This seems to work great on the iPhone but not on the iPad. Anyone get this to work on an iPad?
• John G

  I’d like to find out how this also works on the iPad. Any suggestions or answers? Thx.
• Thad Bloom (@thadbloom)

  I never really resolved my issue with this, it didn’t end up being a huge deal for what I needed it for so I just consolidated to allow the extra space at the top of my layout.
13. Thomas Giles

    Nice work, man. You should probably mention that the page has to be long enough to fill the screen (sans-address-bar), otherwise it will not scroll the address bar out of the way. I think that should answer a lot of people’s problems on here…

    I have one question, though… once you’ve loaded the page and hidden the address bar, the user can still open it up again. I’ve been trying all sorts of things trying to figure out a way of re-hiding it when the user taps back onto the page, but can’t find a method that works properly… Any ideas?
• dasplan

  Exactly, your screen needs to be long enough for the address-bar to disappear.
  But now I want to have a height of 100% and still make the address-bar disappear, any tried this? and succeeded?
  height 100% just takes the available height of the page minus the space for the address-bar…
14. Robert Römer

    @Thomas Giles

    This is just a quick tip, but have you tried the onFocus event?
• Randy Calcaterra

  Very cool script… Really like that functionality…BUT,

  I have installed th same on my site and have it working great, but notice just as in yours mike, that when you view and launch the web app from home screen it hides browser, but the first link you hit on page it opens the new page in a browser, like a hyperlink off an app.

  I am looking to have the entire site and any of the htm pages in the same directory and any subdirectories open in the web app mode ie. without the browser.

  Suggestions? Does anyone else have this working?
15. Dan

    Forgive me for being new to this. I’m would like to get this to work on my mobile site, but the attempts I have made have failed. I’m thinking I’m placing the code in the wrong js file. Is there a specific one I should place it in?

    If it’s of any help, the website I’m creating is a wordpress site.

    Thank you!
16. Rusty

    @RANDY CALCATERRA
    This is what I’ve been using to keep my links from opening anew in mobile Safari.

    jQuery(document).delegate("a:not(.studylink, .refresh, .highslide, .back)", "click", function(event){
    		window.location=this.getAttribute("href");
            return false;
    	});
    

    This targets all of my a tags and returns false when clicked, so that they don’t open the way they want to. So instead of opening the link in the browser, I reset the location of the window to the href that I pulled off the clicked a tag.

    I use delegate, because I sometimes create links dynamically, and .click() only binds the click event to elements that are in the document at the time the code runs.

    This was a helpful article if you’re interested in the differences between .bind(), .live(), .delegate(), and .on():
    http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

    Hope that’s helpful.
17. Rusty

    I am so sorry to have posted so much. I was trying to figure out how to get it formatted correctly.
    That last post is the closest to what I wanted…
18. john

    I tried this code on my mobile games pages, which are longer than 960pixels, but it never works. I guess there are some other requirements for this method to work.
19. Dre

    Really?.. are we really that lazy?.. we really can’t scroll down a few pixels by hand? :|… it’s a website.. it should look like one… i want to see the address up there.. want to know where I am..
    I love apple’s way of being (just works.. ) but most of you’ve just turned it into a couch-potato-do-everything-for-me thing…
    thanks for the comment nonetheless.. any bit of info is always appreciated… (but still)
20. Jamie Wade

    Perfect, thank you very much! Works great on my iPhone layout :)
21. Jesper

    It seems it only works, when you add a ‘#’ sign in the very end of your urladdress
22. Tom

    Hero! Thanks!
23. Leung

    Seems like this is obsolete code now as in I get full screen by default when loading jquery mobile.
• Paul McClean

  What if you’re not using jQuery mobile?
24. Christophe

    Well, this is not enough.
    Hiding the address bar is one thing, but one of the biggest remaining problem is for one-div views (imagine a map-based app). You have to define the exact size of the height of your browser, without address bar. This is not as easy as the one listed here.
    Would be interested to have your point of you on this.
    Stackoverflow has a discussion on this :
    http://stackoverflow.com/questions/4068559/removing-address-bar-from-browser-to-view-on-android

    But none of the listed solutions work correctly on all browsers (i tested chrome, iphone, ipad).
25. Ian Lunn

    This now works in the latest version of Chrome for iOS too!
26. Federico

    Thank You David, works perfectly
27. John

    Great script but I have an issue. For example, I have a banner that a user clicks on and is redirected to my page that has the above script. When the page first loads the header bar doesn’t hide, but if i refresh the page the address bar does hide. im testing on a iphone 4 ios6. any help would be much appreciated.

    Thank you.
28. Sumit

    Doesn’t work if app is as high as the browser window :-/
• theartist

  Right, the page use to have to be 1500 pixels tall, now it looks like it has to be 1800 pixels tall. (I can’t get any of this to work on iPads though)
29. Anil Kumar Panigrahi

    It is doesn’t work for me. Address bar remains the same …
30. Ganesh Ghate

    Works great for me thank you for enlighting
31. Walid Awad

    It doesn’t work on ipad!
32. Kinjal Nagar

    Why I am getting error like: Browser is not defined

    I am adding script like:

    $( document ).ready(function() {
        console.log( "ready!" );
    
    	if((Browser.Platform.ios) || (Browser.Platform.webos) || (Browser.Platform.android)) {
    	//For iPhone and Andriod To remove Address bar when viewing website on Safari Mobile
    	// When ready...
    	window.addEventListener("load",function() {
    	  // Set a timeout...
    	  setTimeout(function(){
    		// Hide the address bar!
    		window.scrollTo(0, 1);
    	  }, 0);
    	});
    }
    

    Please help me asap.

    Thanks,

    Kinjal
33. Lucas Tito

    Why doesn’t this work?

        setTimeout(function(){
          $(window).scrollTop(50);
        }, 4000);
    
34. Scot Nery

    Feb 13, 2016 —- Hi. I have latest iOS. this technique doesn’t work. You can scrollTo 100 and it won’t remove the address bar without scrolling manually. I have not found a solution.
35. omar

    This works, but only for the first page. If you bookmark the homepage to front screen then open it, it will remove the address bar on the first page but once you click to another page inside the site it opens it back into safari with the address bar.

    Is there anyway to keep the entire site’s pages without the address bar?
36. Carlos

    Not working anymore?
37. John

    This no longer works on an iPhone running latest version of IOS 10
38. Bhushan

    window.scrollTo(0, 1);

    doesn’t fire on sharepoint, if you have another solution, please share.

    Thanks in advance
39. Fabien

    The solutions offered don’t work (not in Chrome, not in Firefox; not in iOS, not in Android.) Now obsolete and a total waste of time.
40. Diego

    May 2020,
    Hi,
    the solution proposed here seems to be obsolete for a couple of years now.
    Has anyone found a working solution?
    Thanks