Last active
June 15, 2020 23:55
-
-
Save yckart/5609969 to your computer and use it in GitHub Desktop.
Based on nateps work: https://gist.github.com/nateps/1172490
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 @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
Doesnt work on chrome for ios7 / iPhone 4s
Doesnt work on chrome for android 4.2 / Nexus 10