Best IT Recipes

Removing the address bar from the browser (for viewing on Android)

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

+46
javascript android mobile
Nov 01 '10 at
source share
11 answers

You can do it with the following code

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

Hope this helps you!

+45
Nov 17 '10 at 11:27
source share

Here's the NON-jQuery solution, which instantly deletes the address bar without scrolling. It also works when you rotate the orientation of the browser.

 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 also work with the iPhone, but I could not verify this.

+32
Feb 01 '12 at 17:31
source share

If you downloaded jQuery, you can see if the height of the content exceeds the height of the viewport. If not, then you can do it that height (or a little less). I ran the following code in WVGA800 mode in the Android emulator, and then ran it on the Samsung Galaxy Tab tab, and in both cases it hid the address bar.

 $(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); } });
+14
Jan 11 2018-11-11T00:
source share

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

 nViewH -= 250;

from

 nViewH = nViewH / window.devicePixelRatio;

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

+10
Jun 16 2018-11-16T00:
source share

The one below works for me every time.

This site also has several other suggestions, but this carefree, no problem one of them is available on github: gist and answers your question (inserted 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 the extra height added to the page (which caused problems for you) and the scrollTo () operator cause the address bar to disappear.

From the same site, the "simplest" solution to hide the address bar uses the scrollTo () method:

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

This will hide the address bar until the user scrolls.

This site puts the same method in a timeout function (the excuse is not explained, but claims that the code does not work without it):

 // When ready... window.addEventListener("load",function() { // Set a timeout... setTimeout(function(){ // Hide the address bar! window.scrollTo(0, 1); }, 0); });
+1
Jan 02 '13 at 2:48
source share

The problem with most of them is that the user can still scroll up and see the address bar. To make a permanent decision, you also need to add this.

 //WHENEVER the user scrolls $(window).scroll(function(){ //if you reach the top if ($(window).scrollTop() == 0) //scroll back down {window.scrollTo(1,1)} })
+1
Jan 23 '13 at 4:19
source share

this works on android (at least on a stock 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);
+1
Sep 14 '13 at 21:07
source share

Here is an example that ensures that the body has a minimum height of the device’s screen height and also hides the scroll bar. It uses the DOMSubtreeModified event, but only checks every 400 ms 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.

0
Jun 26 2018-12-12T00:
source share

I hope this is also useful

 window.addEventListener("load", function() { if(!window.pageYOffset) { hideAddressBar(); } window.addEventListener("orientationchange", hideAddressBar); });
0
Feb 27 '16 at 23:24
source share

Finally, I will try with this. It 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 whole view main.xml (res / layout) should look 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" />

do not add layouts.

-one
Nov 16 '12 at 11:07
source share

I found that if you add a command to unload, it holds a page, that is, a page that moves! I hope he works with you too!

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

Using a 7-inch Android tablet, www.kupsoft.com go to my site and check how it behaves on the page, I use this command on my portal.

-2
Apr 04 '13 at 18:20
source share


More articles:


All Articles