bitinn/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A soft-fullscreen prompt for iOS7+

Background

iOS 7.0 and iOS 8 (Beta) do not have support for minimal-ui viewport keyword, nor do they response to window.slideTo(0,1) or support Fullscreen API, which means there is no easy way to tell Mobile Safari to hide address bar/menu without user interaction.
This is a problem for Web App that mimics Native App design, where html/body are commonly set to height: 100%, so browser viewport = available screen estate. There are currently no solution besides adding apple-mobile-web-app-capable meta and ask users to manually Save to Homescreen.
Frustrated by this limit, we present a soft-fullscreen prompt design, which, coupled with proper CSS hack, can achieve soft-fullscreen with relatively small effort from users.
Details

Below is a demo page for such design, basically, by using calc() for height, we are able to target Mobile Safari address bar height, and trigger a soft-fullscreen on user scroll.
html {
	height: calc(100% + 72px);
}

72px isn't a random number, iOS7+ UI has 44px address bar and 44px menu bar for Mobile Safari. When soft-fullscreen is triggered, its address bar collapses to 20px. So the theoretical minimum document height required to trigger hide address bar is 88px - 20px = 68px, plus the viewport height.
After testing on iOS7.1, we found that if such value is below 72px, Mobile Safari does not always hide address bar after user scroll. Thus 72px is chosen as baseline.
(Obviously there are a lot of testing needed to be done for this demo to be usable cross-device, but this demo shows we can achieve soft-fullscreen with relatively small impact on user.)
Reference


http://stackoverflow.com/questions/24889100/ios-8-removed-minimal-ui-viewport-property-are-there-other-soft-fullscreen
https://developer.apple.com/library/prerelease/ios/releasenotes/General/RN-iOSSDK-8.0/


## demo.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Scroll Test</title>

	<style>
		html, body {
			height: 100%;
		}

		html {
			background-color: red;
		}

		body {
			background-color: blue;
			margin: 0;
		}

		div.header {
			width: 100%;
			height: 40px;
			background-color: green;
			overflow: hidden;
		}

		div.content {
			height: 100%;
			height: calc(100% - 40px);
			width: 100%;
			background-color: purple;
			overflow: hidden;
		}

		div.cover {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			display: none;
		}

		@media screen and (width: 320px) {
			html {
				height: calc(100% + 72px);
			}

			div.cover {
				display: block;
			}
		}
	</style>
	<script>
		var timeout;

		window.addEventListener('scroll', function(ev) {

			if (timeout) {
				clearTimeout(timeout);
			}

			timeout = setTimeout(function() {

				if (window.scrollY > 0) {
					var cover = document.querySelector('div.cover');
					cover.style.display = 'none';
				}

			}, 200);

		});
	</script>
</head>
<body>

	<div class="header">
		<p>header</p>
	</div>
	<div class="content">
		<p>content</p>
	</div>
	<div class="cover">
		<p>scroll to soft fullscreen</p>
	</div>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Scroll Test</title>

	<style>
	html, body {
	height: 100%;
	}

	html {
	background-color: red;
	}

	body {
	background-color: blue;
	margin: 0;
	}

	div.header {
	width: 100%;
	height: 40px;
	background-color: green;
	overflow: hidden;
	}

	div.content {
	height: 100%;
	height: calc(100% - 40px);
	width: 100%;
	background-color: purple;
	overflow: hidden;
	}

	div.cover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	display: none;
	}

	@media screen and (width: 320px) {
	html {
	height: calc(100% + 72px);
	}

	div.cover {
	display: block;
	}
	}
	</style>
	<script>
	var timeout;

	window.addEventListener('scroll', function(ev) {

	if (timeout) {
	clearTimeout(timeout);
	}

	timeout = setTimeout(function() {

	if (window.scrollY > 0) {
	var cover = document.querySelector('div.cover');
	cover.style.display = 'none';
	}

	}, 200);

	});
	</script>
	</head>
	<body>

	<div class="header">
	<p>header</p>
	</div>
	<div class="content">
	<p>content</p>
	</div>
	<div class="cover">
	<p>scroll to soft fullscreen</p>
	</div>

	</body>
	</html>