Hide address bar on map/page load in mobile device?

NickO_Day — Fri, 12 Apr 2013 19:05:12 GMT

I'm trying to figure out how to automatically hide the address bar when the map is finished loading. This can easily be accomplished on iPhones by creating a shortcut on the home screen by adding this to the head:
[HTML]<meta name="apple-mobile-web-app-capable" content="yes" />[/HTML]
But... since I'm trying to make the user experience as consistent as possible (and not force users to create shortcuts) I need to hide the address bar in either case (and not use up valuable screen real estate).
Everything I've found so far relies on "scrolling" to the top of the page or setting the height of the page body to a few pixels larger than what is really needed. In a map app, scrolling doesn't apply and the map element is loaded as height:100%... setting the height to 101% or higher doesn't work either (believe me, I've tried).

Here's what I've found so far (none of which seem to work in mobile Safari on an iPhone):
1) Adding this meta link in the head although the user-scalable=yes is contrary to the Esri JavaScript samples (where they list user-scalable=0):
[HTML]<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />[/HTML]

2) Using straight JS to "scroll" to the top of the page

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

3) Wrapping the body in jQuery and using that toolkit to do the same thing as #2:

    $('body').scrollTop(1);

So far, none of these things are working... does anyone know how to successfully hide the address bar automatically (while the device is oriented in portrait)?

Re: Hide address bar on map/page load in mobile device?

SteveCole — Fri, 12 Apr 2013 21:42:09 GMT

I haven't dealt with this but a quick Google search revealed this.

Re: Hide address bar on map/page load in mobile device?

NickO_Day — Mon, 15 Apr 2013 16:05:58 GMT

Hi Steve,
Thanks for the input... it wasn't the solution that I was looking for, but still a cool little bit of code that will come in handy. I can imagine using the full screen code you found will be useful when doing presentations on a large screen (when hiding the browser and rest of the desktop is smart).

I ended up finding the following slick bit of code that works perfectly:
http://menacingcloud.com/source/js/FlameAutoScroll.js

Problem solved!

topic Hide address bar on map/page load in mobile device? in ArcGIS JavaScript Maps SDK Questions

Hide address bar on map/page load in mobile device?

Re: Hide address bar on map/page load in mobile device?

Re: Hide address bar on map/page load in mobile device?