Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Hide the Address Bar within Mobile Web Applications

By David Walsh on March 30, 2011

With both iOS and Android-driven devices using WebKit as their browser's rendering engine, web developers have many advantages:

A rendering engine with capable of flawless CSS animations
A rendering engine that's fast...very fast
A rendering engine that's modern and forward-thinking

These advantages allow us to create web apps within that browser that look as good as native applications. If your goal is to create web apps that look like native applications, the details count. One of those details: hiding the address bar. Native applications don't have address bars so why should your app? As an added bonus, hiding the address bar will provide you an extra 60 pixels of space!

You may think hiding the address bar within the mobile browser is difficult but you'd be surprised how simple it is. All you need is a touch of JavaScript!

The JavaScript

// When ready...
window.addEventListener("load",function() {
	// Set a timeout...
	setTimeout(function(){
		// Hide the address bar!
		window.scrollTo(0, 1);
	}, 0);
});

The window.scrollTo method is the key to hiding the address bar. The wrapping setTimeout function is required by the iPhone to properly hide the address bar -- not using setTimeout will cause problems.

Bonus: META Tag for Bookmarked Sites

If a user has added your web application to their springboard, the following meta tag can remove the top bar from the browser:

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

And that's all! The address bar is hidden until the user swipes down near the top bar of the application. With the address bar hidden, your web app can look just like a native app!

Recent Features

By David WalshDecember 10, 2012
How to Create a Twitter Card
One of my favorite social APIs was the Open Graph API adopted by Facebook. Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...
By David WalshApril 4, 2011
Convert XML to JSON with JavaScript
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My...

Incredible Demos

By David WalshDecember 5, 2012
Disable Autocomplete, Autocapitalize, and Autocorrect
Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features. Unfortunately these features can sometimes get in the way; we don't always want or need the help they provide. Luckily most browsers allow...
By David WalshOctober 7, 2009
Do / Undo Functionality with MooTools
We all know that do/undo functionality is a God send for word processing apps. I've used those terms so often that I think of JavaScript actions in terms of "do" an "undo." I've put together a proof of concept Do/Undo class with MooTools. The MooTools...

Discussion

Juan Velandia
Thanks!, didn’t know about that meta and works just great :)
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.

Kyle Powers
That’s just plain cool. Javascript FTW. Thanks for the tip!
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!
Jaffe
Doesn’t seem to be working. have tried all the above steps… Did the new iOS update change things?

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.

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

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

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**

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.
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);
}

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.

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…

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?

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!
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.
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…
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.
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)
Jamie Wade
Perfect, thank you very much! Works great on my iPhone layout :)
Jesper
It seems it only works, when you add a ‘#’ sign in the very end of your urladdress
Tom
Hero! Thanks!
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?

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).
Ian Lunn
This now works in the latest version of Chrome for iOS too!
Federico
Thank You David, works perfectly
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.
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)

Anil Kumar Panigrahi
It is doesn’t work for me. Address bar remains the same …
Ganesh Ghate
Works great for me thank you for enlighting
Walid Awad
It doesn’t work on ipad!

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

Lucas Tito

Why doesn’t this work?

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

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.
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?
Carlos
Not working anymore?
John
This no longer works on an iPhone running latest version of IOS 10
Bhushan
```
window.scrollTo(0, 1);
```
doesn’t fire on sharepoint, if you have another solution, please share.

Thanks in advance
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.
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

Hide the Address Bar within Mobile Web Applications

The JavaScript

Bonus: META Tag for Bookmarked Sites

Recent Features

How to Create a Twitter Card

Convert XML to JSON with JavaScript

Incredible Demos

Disable Autocomplete, Autocapitalize, and Autocorrect

Do / Undo Functionality with MooTools

Discussion