How to control screen view on android default browser

Question

I want to develop a web app which user can access it using android default web browser (at least). There are some issue about the app screen control but i still can't find the solution anywhere else and i don't know where can i find for the look-alike. I need the app to be

Full screen

If(No.1 is impossible) navigation bar is either permanently shown or permanently hidden

The app is fixed to the position and can't be scrolled horizontally or vertically and no scroller appear on the right side

Are all or some of these can be done using javascript/css/html?

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

You can use this jquery function to hide 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 = nViewH / window.devicePixelRatio;
          $('BODY').css('height',nViewH + 'px');
        }
        window.scrollTo(0,1);
      }

});

You can try the NiceScroll plugin to get the scrolling solution.

Here are some more threads you should look at before attempting anything:

Removing address bar from browser (to view on Android)

Fullscreen Web App for Android

HTML5 Full Screen Web Apps: No browser bars

You can also try:

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

edited May 23 '17 at 10:25

Community

1
1

answered Oct 29 '12 at 05:31

Anup Cowkur

20,443
6
51
84

thanx for answering. i'll check those out – stackunderflow Oct 29 '12 at 05:50
it won't work. the user can still scroll to view or hide the nav bar – stackunderflow Oct 29 '12 at 06:17
what browser are you testing this on? – Anup Cowkur Oct 29 '12 at 06:23
android default browser. as i state in the question – stackunderflow Oct 29 '12 at 06:25
fail too. it only hide the bar on first load of html. but the window can still be scrolled to hide and show the bar. the browser bar is permanently shown in other browsers. but it's android browser i try to deal with. at least until there's no choice for me – stackunderflow Oct 29 '12 at 06:35
sorry mate. Apart from this, there isn't much you can do since google has given the user the option to control full screen mode. If the user has disabled it, It's not gonna happen. If you were making a native app, you can control it via a webview but not other browsers. – Anup Cowkur Oct 29 '12 at 06:59
ok thanx. i getting tired too with android default browser. but even chrome and firefox can't serve me the solution. i think what is the best left for me is re-scale my app to suit them all – stackunderflow Oct 29 '12 at 07:21
yup. Sounds like the best solution. – Anup Cowkur Oct 29 '12 at 07:28

stackunderflow · Accepted Answer · 2012-10-30T05:53:13.720

It is browser feature that allow user to go full screen. Some mobile browser don't support it. This include android native browser. If it is, it is just the browser display setting that hide the tab bar and nav bar
Automatically, the scroll is appear when the page is overflow and user scroll it down
For android native browser, the bar is stick to the top of website. So it'll be scrolled out if user can scroll the page down. Some browser also have other extra bars stick to the page side. For example, dolphin have bookmarks, history, and add-on bar on it's side
All of these can simply be managed using javascript or css by set the height and width of the elements
For best performance, use Chrome instead
Avoid using jQuery mobile, it will fail everything
Also remember to put this tag to prevent zooming

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

How to control screen view on android default browser

2 Answers2