How to control screen view on android default browser
-
15-07-2021 - |
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?
Solution 2
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"/>
OTHER TIPS
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);
}