While the iPhone packs a lot of resolution into its relatively small screen, the address bar consumes about 60 pixels of real estate by default when a page is loaded in MobileSafari. With either 320 or 480 pixels available to the viewport, 44 of which are reserved for the bottom toolbar, it’s necessary to maxamize every available pixel. Below, we will show you two examples you can use to hide the default address bar when the page loads, allowing you to reclaim this valuable space in your iPhone presentations.
There are several ways to accomplish this, the simplest way we have found is as follows:
NOTE: This is depreciated in iOS 5. Check out http://snippetspace.com/iwebkit/demo/ for iOS 5 support.
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body>We define an on load event handler in the body tag and use a simple function to hide the scrollbar whenever the page loads. Actually, it is shifted above the viewport just out of sight. In this way, we can load content in that area while still allowing your visitors access to the controls, should they need them.
Another method is as follows:
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(
hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>This achieves the same effect by creating an event listener and writing a simple function to handle the scrolling of the address bar.
By suppressing the default address bar we are able to reclaim this space for our presentations. I hope you have found this tutorial useful, let me know what you think.
Here’s an example. View source and copy/paste the body tag into your HTML document to apply it to your page.
Simple and straight forward. Thank you!
You’re welcome.
Thank You!
Absolutly splendid! You just made my day. ;D
/SMJ
Ehhh? What? Nothing hides…..
Did you try replacing the body tag with the one above? Or include the JS in the head for the other example?
Awesome, thanks Shaun. I just tested the first example on the iphone4 and it works perfectly. Cheers!
Glad it worked out. Cheers.
Just wanted to say a quick thanks for this tip. Always appreciate fellow developers who take the time our of their day to share their knowledge with others.
Thanks for the kind words Travis. I’m glad it was useful to you.
Fantastic post!
Tried both methods with no success- my page width and height are set to 100% to accommodate full-sized background image javascript. Do you think that could be interfering?
Thanks so much for your help!
Daniel
Hi Daniel, If you’re having problems getting the example to work, I would try removing the extraneous markup and verifying it works before integrating into your project.
Hey that worked well. How would you get this to work on an Android device (the samsung galaxy) for example?
I don’t own that phone, but Androids browser is built on WebKit, the same engine iPhone’s browser uses, so it should work on the galaxy too to the best of my knowledge.
Hey Shaun! Thats just what I’m looking for!
But I notice that, if I were to tilt to landscape orientation, it would move to part of the content, Is there anyway I could:
upon landscape orientation
1) Hide the address bar
2) Make it loaded with the header instead of part of the content?
Please advice
Once again Shaun, BRILLANT WORK
Hi Mint. Thanks, I’m glad it’s working out for ya. Check out this article, specifically the part about viewport orientation to handle #2.
http://shaunmackey.com/articles/mobile/6-tips-to-optimize-your-website-for-iphone/
That should give you a start anyway.
Hey Shaun,
Thanks for the prompt reply!
Will need a bit of time to go through that but nonetheless, Thank you so much!
I’ve tried both methods and can’t get either to work. I’m stumped.
Figred it out. My document wasnt tall enough to make the address bar move.
OMG…. “My document wasnt tall enough”. Seriously, didn’t think about this. Been going around in circles! Thanks!!!!
Hi, I use the longer version to hide my toolbar (address bar) as the meta option doesn’t seem to work (I have a long page).
But when I add a jquery.js to the page as a link in the head, the bar only half hides?
Anyone come across this?
Cheers!
nice, easy and works a treat!
At last! Someone with real epexritse gives us the answer. Thanks!
You probably already know this … but if you add this meta-tag to the page:
<meta name=”apple-mobile-web-app-capable” content=”yes” />
Then when a user saves the page with the “Add to Home Screen” option, the shortcut it creates will subsequently launch the page with no chrome at all — no address bar or button bar, just the status bar at the very top.
You can even specify an icon to be used on the desktop, with this additional meta-tag:
<link rel=”apple-touch-icon” href=”whatever.png “/>
HTH
Does not work for IOS5
As the comment above states, it doesn’t work with iOS 5. I’ve scoured the web and haven’t found a solution, but google seems to manage to do it (goto http://www.google.com on an iOS5 iphone).
Would love a solution.
Thanks.
Here’s a demo which can be downloaded that handles this in ios5. http://snippetspace.com/iwebkit/demo/
Hey I am playing with a mobile version of my portfolio and used your script before and had it working. I am taking a new approach using html 5 with the html5 boilerplate template and it isn’t working any thoughts?
The javascript solution appears to work perfectly on iOS5. Thanks for the post, this made my day
js works well for me on ios 4+5 in a jqm framework.