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

1. Full screen
2. If(No.1 is impossible) navigation bar is either permanently shown or permanently hidden
3. 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?

Answer 1

1. 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

2. Automatically, the scroll is appear when the page is overflow and user scroll it down

3. 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

4. All of these can simply be managed using javascript or css by set the height and width of the elements

5. For best performance, use Chrome instead

6. Avoid using jQuery mobile, it will fail everything

7. Also remember to put this tag to prevent zooming

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

Answer 2

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);
 }