I am currently writing some kind of web application and I want to hide the address bar on iOS devices, and also preferably on Android devices.
I usually do this with
window.addEventListener( 'load', function () { setTimeout( function () { window.scrollTo( 0, 1 ); }, 0 ); });
but this will not work now because the page does not have enough content to scroll.
Now I know that this is a common problem, and I know that there are several solutions, but I would prefer a small, bulletproof solution.
Actually, I was very pleased when I found this question: http://stackoverflow.com/questions/9678194/cross-platform-method-for-removing-the- address-bar-in-mobile web application
where was this code sent:
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 );
Unfortunately, this does not work for me. I see something happening because some elements with padding-top set as a percentage move down, but the address bar remains.
Of course, I also did a google search and tried a lot of snippets that I found. Some didn't do anything, some just moved elements a bit with padding-top .
The only working code I found is:
var page = document.getElementById('page'), ua = navigator.userAgent, iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'), ipad = ~ua.indexOf('iPad'), ios = iphone || ipad, // Detect if this is running as a fullscreen app from the homescreen fullscreen = window.navigator.standalone, android = ~ua.indexOf('Android'), lastWidth = 0; if (android) { // Android browser adds the scroll position to the innerHeight, just to // make this really difficult. Thus, once we are scrolled, the // page height value needs to be corrected in case the page is loaded // when already scrolled down. The pageYOffset is of no use, since it always // returns 0 while the address bar is displayed. window.onscroll = function() { page.style.height = window.innerHeight + 'px' } } var setupScroll = window.onload = function() { // Start out by adding the height of the location bar to the width, so that // we can scroll past it if (ios) { // iOS reliably returns the innerWindow size for documentElement.clientHeight // but window.innerHeight is sometimes the wrong value after rotating // the orientation var height = document.documentElement.clientHeight; // Only add extra padding to the height on iphone / ipod, since the ipad // browser doesn't scroll off the location bar. if (iphone && !fullscreen) height += 60; page.style.height = height + 'px'; } else if (android) { // The stock Android browser has a location bar height of 56 pixels, but // this very likely could be broken in other Android browsers. page.style.height = (window.innerHeight + 56) + 'px' } // Scroll after a timeout, since iOS will scroll to the top of the page // after it fires the onload event setTimeout(scrollTo, 0, 0, 1); }; (window.onresize = function() { var pageWidth = page.offsetWidth; // Android doesn't support orientation change, so check for when the width // changes to figure out when the orientation changes if (lastWidth == pageWidth) return; lastWidth = pageWidth; setupScroll(); })();
A source
But I am not very happy with this decision, because I am not friends with OU sniffing.
Do you have any suggestions that I could try to get it to work without sniffing the UA? Could this be my HTML code that causes problems with some of the scripts I wrote?