AnsweredAssumed Answered

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

Question asked by nickoday2005 on Apr 12, 2013
Latest reply on Apr 15, 2013 by nickoday2005
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)?

Outcomes