-
-
Save nateps/1172490 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <meta charset=utf-8> | |
| <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <meta name=apple-mobile-web-app-capable content=yes> | |
| <meta name=apple-mobile-web-app-status-bar-style content=black> | |
| <title>Test fullscreen</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> | |
| <div id=page></div> | |
| <script> | |
| 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'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.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(); | |
| })(); | |
| </script> |
Good, you find a solution who work great for Iphone.
But i had strange behavior with all script i tested for Android.
For Android, i got problems, sometime it work, sometime not. and i user a navigation with history, when i do ajax call with history, i.e. like #home or #section, i lost the fullscreen mode (the adress bar is showing). if i return to my first page like #home, it will return full screen.
I tryed something like that for Android but with the exact same problem
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); }, 100 );
}
}
window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );
For ajax history navigation, i found something who work, but adress bar show and hide at each hash change.
Adding this to your current script at the end but need jQuery or Zepto
$(window).bind('hashchange', function() {
setupScroll();
});
I have an error showing up, says Cannot read property 'offsetWidth' of null?
@maustyle Just freaking LOL at people copy-pasting without thinking, then asking questions without thinking.
I have a project where this came in very handy, thanks. In my project, I needed to set have a fixed viewport width, which wouldn't allow me to use the "initial-scale" and "maximum-scale" parameters in the meta tag. Because the scale was not 100%, the address bar in iOS would only scroll up halfway, due to the calculation using document.documentElement.clientHeight. I was able to remedy this by using screen.height instead.
For Android, i got problems, sometime it work, sometime not. i have created website not refresh page just show and hide element. Iphone it working fine except Android
This does not work in Google Chrome to Android.
I've refactored this a bit: https://gist.github.com/yckart/5609969
Hi guys i am using your Code in my 360 panorama but on the iphone 6 and android large screens it brakes @ the bottom of the screen
Here is a Example of a fullscreen 360 http://webbox.mobilemall.nl
i can only edit the HTML Index file
Use the following to combine full-screen with vertical scrolling of one part of the page. Requires iscroll-lite.js in the subdir js.