Removing address bar from browser (to view on Android)

Question

Does anyone know how I can remove the address bar from the Android browser to better view my web app and make it look more like a native app?

score 46 · Accepted Answer · edited Dec 02 '11 at 20:29

46

You can do that with the next code

 if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
 }

I hope it helps you!

edited Dec 02 '11 at 20:29

user229044

232,980
40
330
338

answered Nov 17 '10 at 11:27

Carlos

484
5
2

12

Note that this only works if you have enough page content that requires the page to scroll. If you don't, then you should tack on a bunch of
tags or use CSS to add more space on page height. This would be great in a jQuery function that detects viewport height and adds the necessary space to the page height. – Volomike Jan 10 '11 at 19:42
Agree with Volomike. I could only get my browser addr bar to disappear by using @meagar code below. – Mark Dec 31 '11 at 05:00
1

The other issue is that browsers often restore the position on the page when the user navigates back to it. using window.scrollTo overrides this built-in feature which is going to be annoying for most of the users. – Mehrad Sadegh Mar 27 '14 at 01:51
1

combine with `body { min-height: calc(100vh + 1px); }` – Daut Mar 05 '19 at 15:14

score 32 · Answer 2 · edited Apr 08 '12 at 03:06

32

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",function(){hideAddressBar();});

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

edited Apr 08 '12 at 03:06

user1319665

3
1

answered Feb 01 '12 at 17:31

Tim Eckel

1,405
11
10

8

I think you meant to put the scrollTo() call in an anonymous function for setTimeout() to call? – jowo Apr 15 '12 at 06:58
@jowo: I think he uses only timeout because he wants to run the code in a separated thread (when it 'breaks' it will not stop other scripts and to do smooth as possible, other scripts don't have to wait). But when doing this i recommended to use 10 milliseconds delay to do it because it is possible that the function will not fired when it is zero (seen on some browsers). Also, place scrollbar check also in timeout. – Codebeat Nov 11 '12 at 05:22
`window.outerHeight/window.devicePixelRatio` this works! Thank you very much. – kio21 Nov 22 '12 at 06:55
3

@Erwinus: The reason for the timeout is so the scroll occurs after the event handling for "load" or "orientationchange" completes (JavaScript is *always* single-threaded as far as the script is considered). The error that I pointed out is that he is calling scrollTo(1,1) within hideAddressBar, and then passing the return of scrollTo to setTimeout. Instead, it should be: setTimeout(function() { window.scrollTo(1,1); },0) – jowo Apr 21 '13 at 09:16
It seems that this doesn't work longer on iOS (6+) any thoughts on this? http://jsbin.com/awedem/2/ – yckart May 13 '13 at 23:59

score 14 · Answer 3 · edited Dec 02 '11 at 20:30

14

If you've loaded jQuery, you can see if the height of the content is greater than the viewport height. If not, then you can make it that height (or a little less). I ran the following code in WVGA800 mode in the Android emulator, and then ran it on my Samsung Galaxy Tab, and in both cases it hid the addressbar.

$(document).ready(function() {

  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 -= 250;
      $('BODY').css('height',nViewH + 'px');
    }
    window.scrollTo(0,1);
  }

});

edited Dec 02 '11 at 20:30

user229044

232,980
40
330
338

answered Jan 11 '11 at 02:29

Volomike

23,743
21
113
209

1

I would suggest changing from matching on 'Android' to matching on 'Mobile'. This would then support iPhone and potentially other mobile platforms. – Dan Feb 22 '11 at 18:32
1

Thanks, your solution works nicely on my Galaxy S. But, no solutions for Safari? On iphone 4, it doesn't seem to work. – HyoGi Sim Feb 16 '11 at 07:25
@meagar Many thanks for this bit of code. Works well on my Sony Ericsson Xperia Play (Android 2.3). However, when navigating back to a screen that has this code on it, the page will quickly dip down (wanting to display the browser addr bar) the (because of yr code) addr bar will quickly slide up. How can I stop this "jerky" action? Is it possible to detect if the browser addr bar is already hidden so I can bypass yr code in this circumstance? – Mark Dec 31 '11 at 04:59
It doesn't work on iPhone because iOS does not allow you to hide the address bar unless you and your user do the steps here: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/ – Bobby Sep 26 '12 at 23:55
To remove address bar in Safari: [Web App Meta Tag](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) – Greg Perham Jan 16 '14 at 15:32
window.scrollTo(0,1); is enough when page loads. CSS: html,body { height:101% !important; } – Codebeat Apr 16 '15 at 20:55

score 10 · Answer 4 · edited May 23 '17 at 12:17

10

Referring to Volomike's answer, I would suggest replacing the line

nViewH -= 250;

with

nViewH = nViewH / window.devicePixelRatio;

It works exactly as I check on a HTC Magic (PixelRatio = 1) and a Samsung Galaxy Tab 7" (PixelRatio = 1.5).

edited May 23 '17 at 12:17

Community

1
1

answered Jun 16 '11 at 16:51

Rafael Perelló

101
1
2

Note the case type on the nViewH variable name. The line should be: nViewH = nViewH / window.devicePixelRatio; – Rafe Jul 03 '11 at 15:04
Yes this partly works on Samsung Ace 2 it does not work the first time when page is opened from a short cut and then refreshed, works on the second refresh. Is it possible to amend for this event please? Otherwise it is still a better solution than having that awful address bar taking up the screen area. – 27k1 Apr 30 '13 at 07:52

score 1 · Answer 5 · answered Jan 02 '13 at 02:48

The one below works for me every time..

This site also has a few other suggestions, but this no-nonsense, no-worry one is available in a github:gist and answers your question (pasted here for convenience):

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

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

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );

As far as I can tell, the combination of extra height added to the page (which caused problems for you) and the scrollTo() statement make the address bar disappear.

From the same site the 'simplest' solution to hiding the address bar is using the scrollTo() method:

window.addEventListener("load", function() { window.scrollTo(0, 1); });

This will hide the address bar until the user scrolls.

This site places the same method inside a timeout function (the justification is not explained, but it claims the code doesn't work well without it):

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

score 1 · Answer 6 · answered Jan 23 '13 at 04:19

1

The problem with most of these is that the user can still scroll up and see the addressbar. To make a permanent solution, you need to add this as well.

//WHENEVER the user scrolls
$(window).scroll(function(){
    //if you reach the top
    if ($(window).scrollTop() == 0)   
    //scroll back down  
    {window.scrollTo(1,1)}
})

answered Jan 23 '13 at 04:19

user1869558

697
3
11
21

2

You don't want to hijack the user's browser just because they went to your site. Not allowing them to scroll up effectively locks their browser to your site (disregarding other tabs they may have had open). – Buns of Aluminum Jun 25 '13 at 14:45

score 1 · Answer 7 · edited Sep 14 '13 at 21:28

1

this works on android (at least on stock gingerbread browser):

<body onload="document.body.style.height=(2*window.innerHeight-window.outerHeight)+'px';"></body>

further if you want to disable scrolling you can use

setInterval(function(){window.scrollTo(1,0)},50);

edited Sep 14 '13 at 21:28

Chris

8,527
10
34
51

answered Sep 14 '13 at 21:07

ranjan_purbey

421
4
11

JussiR · Answer 8 · 2012-07-01T12:23:30.280

Here's an example that makes sure that the body has minimum height of the device screen height and also hides the scroll bar. It uses DOMSubtreeModified event, but makes the check only every 400ms, to avoid performance loss.

var page_size_check = null, q_body;
(q_body = $('#body')).bind('DOMSubtreeModified', function() {
  if (page_size_check === null) {
    return;
  }
  page_size_check = setTimeout(function() {
    q_body.css('height', '');
    if (q_body.height() < window.innerHeight) {
      q_body.css('height', window.innerHeight + 'px');
    }
    if (!(window.pageYOffset > 1)) {
      window.scrollTo(0, 1);
    }
    page_size_check = null;
  }, 400);
});

Tested on Android and iPhone.

The function bound to `DOMSubtreeModified` won't execute if `page_size_check === null` and it starts out `null`. How does `page_size_check` ever get set? Also, why set it to `null` again at the end of the function? — Ted Hopp, Jul 11 '12 at 05:27

score 0 · Answer 9 · edited Feb 27 '16 at 23:26

0

I hope it also useful

window.addEventListener("load", function() 
{
    if(!window.pageYOffset)
    { 
        hideAddressBar(); 
    }
    window.addEventListener("orientationchange", hideAddressBar);
});

edited Feb 27 '16 at 23:26

Tunaki

132,869
46
340
423

answered Feb 27 '16 at 23:24

score -1 · Answer 10 · edited Nov 16 '12 at 11:24

Finally I Try with this. Its worked for me..

  public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_ebook);

    //webview use to call own site
    webview =(WebView)findViewById(R.id.webView1);

    webview.setWebViewClient(new WebViewClient());       
    webview .getSettings().setJavaScriptEnabled(true);
    webview .getSettings().setDomStorageEnabled(true);     
    webview.loadUrl("http://www.google.com"); 
}

and your entire main.xml(res/layout) look should like this:

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

don't go to add layouts.

score -2 · Answer 11 · edited Apr 04 '13 at 18:42

-2

I found that if you add the command to unload, he keeps down the page, ie the page that move! Hope it works with you too!

window.addEventListener("load", function() { window.scrollTo(0, 1); });
window.addEventListener("unload", function() { window.scrollTo(0, 1); });

Using a 7-inch tablet with android, www.kupsoft.com visit my website and check how it behaves page, I use this command in my portal.

edited Apr 04 '13 at 18:42

wmfairuz

1,033
10
19

answered Apr 04 '13 at 18:20

Junior Penascais

1

Because we are using a technique to scroll the page layout does not need to have content on the page so that the scrolling can happen. I added several
at the end to create a space scroll – Junior Penascais Apr 04 '13 at 18:23

Removing address bar from browser (to view on Android)

11 Answers11

Linked

Related