Skip to content

Instantly share code, notes, and snippets.

@yckart
Last active June 15, 2020 23:55
Show Gist options
  • Save yckart/5609969 to your computer and use it in GitHub Desktop.
Save yckart/5609969 to your computer and use it in GitHub Desktop.
/**
* Hide the addressbar on ios & android devices
* https://gist.github.com/yckart/5609969
*
* Based on the work from Nate Smith
* @see https://gist.github.com/nateps/1172490
*
* Copyright (c) 2013 Yannick Albert (http://yckart.com)
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
* 2013/07/10
*/
;(function(window) {
window.hideAddressbar = function (elem) {
elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
var ua = navigator.userAgent,
iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
ipad = ~ua.indexOf('iPad'),
ios = iphone || ipad,
android = ~ua.indexOf('Android'),
// Detect if this is running as a fullscreen app from the homescreen
fullscreen = window.navigator.standalone,
lastWidth = 0;
// We don't go further if we are
// not on an ios or android device
// or the passed element was not found
if (!(ios || android) || !elem) return;
if (android) {
// Android's browser adds the scroll position to the innerHeight, just to
// make this really fucking 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.addEventListener('scroll', function () {
elem.style.height = window.innerHeight + 'px';
}, false);
}
var setupScroll = function () {
var height = 0;
// 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
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;
} 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.
height = window.innerHeight + 56;
}
elem.style.height = height + '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);
};
(function resize() {
var pageWidth = elem.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();
window.addEventListener('resize', resize, false);
}());
};
}(this));
/**
* Hide the addressbar on ios & android devices
* https://gist.github.com/yckart/5609969
*
* Based on the work from Nate Smith
* @see https://gist.github.com/nateps/1172490
*
* Copyright (c) 2013 Yannick Albert (http://yckart.com)
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
* 2013/07/10
*/
;(function(a){a.hideAddressbar=function(g){g=typeof g==="string"?document.querySelector(g):g;var b=navigator.userAgent,i=~b.indexOf("iPhone")||~b.indexOf("iPod"),k=~b.indexOf("iPad"),f=i||k,e=~b.indexOf("Android"),j=a.navigator.standalone,c=0;if(!(f||e)||!g){return}if(e){a.addEventListener("scroll",function(){g.style.height=a.innerHeight+"px"},false)}var h=function(){var l=0;if(f){l=document.documentElement.clientHeight;if(i&&!j){l+=60}}else{if(e){l=a.innerHeight+56}}g.style.height=l+"px";setTimeout(scrollTo,0,0,1)};(function d(){var l=g.offsetWidth;if(c===l){return}c=l;h();a.addEventListener("resize",d,false)}())}}(this));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width">
<title>hideAddressbar.js</title>
<style>
html, body {
margin: 0;
padding: 0;
}
#page {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 8px solid #f00;
}
</style>
</head>
<body>
<div id="page"></div>
<script src="hideAddressbar.js"></script>
<script>hideAddressbar('#page');</script>
</body>
</html>
@LeCanardNoir
Copy link

This don't work for me on my Google Nexus4 Android 4.*** Some one can help me ?

@Romainpetit
Copy link

Doesnt work on chrome for ios7 / iPhone 4s
Doesnt work on chrome for android 4.2 / Nexus 10

@yckart
Copy link
Author

yckart commented Nov 11, 2013

@LeCanardNoir @Romainpetit Since I made this gist, there are a lot of new devices / os-updates out there... If I get the time I'll push this to the next level... Though it would be great if you could help to fiddle the cross-device support out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment