-1

So, I've drunk the web-app kool-aid, and I'm switching from building Android native apps to building web apps.

But I'm having really bad problems on Android browsers with the address bar (update: specifically, my HTC Desire Z running Android 2.3.3, I'm not sure how many other versions it affects):

  • Problem 1: While the page is loading, the address bar hides the top ~30px of content. (Why on earth does it do this?!)
  • Problem 2: In some situations, the address bar won't go away - this occurs for me in portrait when the connection speed is slow.

So on some occasions, the address bar hides the top 30px of content permanently. This is seriously broken.

I borrowed some code from another StackOverflow question to try to fix this:

  if (navigator.userAgent.match(/Android/i)) {
    window.scrollTo(0,0); // reset in case prev not scrolled  
    var nPageH = $(document).height();
    var nViewH = window.outerHeight;
    if (nViewH > nPageH) {
      nViewH = nViewH / window.devicePixelRatio;
      $('BODY').css('height',nViewH + 'px');
    }
    window.scrollTo(0,1);
  }

But it doesn't seem to work reliably - not to mention that it's a horrible solution. What can I do?

Community
  • 1
  • 1
Richard
  • 31,629
  • 29
  • 108
  • 145

2 Answers2

0

What's your phone and your phones android version? Im having a galaxy s2 - the address bar is not implemented as an overlay there, the real content is below, not behind the address bar. If you scroll down the addressbar will go up and it's not visible anymore. Anyway, that is NOT a bug, it's a feature! The user could not go away if he entered your site once, if you would do that. If you don't want this 'annoying' addressbar, create a 'normal' android app with an WebView and load your desired site within there.

poitroae
  • 21,129
  • 10
  • 63
  • 81
  • I'm using the HTC Desire Z with Android 2.3.3. It's definitely a bug! The address bar doesn't *go away* once the site has loaded, it just moves higher up so that the hidden content is revealed, hiding the phone's status bar in the process. That should happen straight away. – Richard Dec 16 '11 at 19:17
  • And yes, I could just build an Android app, but do Google want people to build web apps or not? – Richard Dec 16 '11 at 19:17
  • @Richard Please use the edit functionallity, if you'd like to append something to your last statement, just for clarity purposes. Yes, that's correct. The thing is, if your app isn't in ANY market (android,appstore) your web app will simple not being found. You just create a very basic sceleton in your android/iphone app which just represents a webview. Result: Your apps are shown in the app market + Your app is highly dynamic (in a pinch you can use non-web-app features) + You don't get browser-specific problems and all over this, your app still looks the same everywhere! – poitroae Dec 16 '11 at 19:53
  • yes, I understand the difference between web apps and mobile apps. That wasn't the question. – Richard Dec 19 '11 at 11:21
0

Here's the NON-jQuery solution that instantly removes the address bar without scrolling. Also, it works when you rotate the browser's orientation.

function hideAddressBar(){
  if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
    document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
  setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",hideAddressBar());

It should work with the iPhone also, but I couldn't test this.

Tim Eckel
  • 1,405
  • 11
  • 10