yavuztas/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Remove rubberband scrolling from web apps on mobile safari and standalone (iOS)</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <style>
  html, body {margin: 0; padding: 0; width:100%; height:100%; overflow: hidden; background: #333}
  p.center {
    position: absolute;
    width: 50%;
    font-size: 30px;
    font-family: Ubuntu, Arial, sans-serif;
    color: #ededed;
    top: 40%;
    left: 50%;
    margin-left: -25%;
    text-align: center;
  }
  </style>
</head>

<script>
/**
* Small helper class to detect os
*/
var Device = new (function() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  // Windows Phone must come first because its UA also contains "Android"
  this.windows = /windows phone/i.test(userAgent)
  this.android = /android/i.test(userAgent)
  // iOS detection from: http://stackoverflow.com/a/9039885/177710
  this.ios = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream
})();

/**
* Execute any function with debounce of given wait amount
* @param  {number} wait       wait amount in miliseconds to bounce
* @param  {boolean} immediate true for immidate execution
*/
function debounce(func, wait, immediate) {
  var timeout
  return function() {
    var context = this, args = arguments
    var later = function() {
      timeout = null
      if (!immediate) func.apply(context, args)
    }
    var callNow = immediate && !timeout
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
    if (callNow) func.apply(context, args)
  }
}
</script>
<body>
  <p class="center">Try pulling down this page with touch in iPhone/iPad, at last nothing happens! No rubberband scroll or zoom in-out.</p>
  <script>
  if(Device.ios){
    //need to add event after body created
    document.body.addEventListener('touchmove', function(e) {
      e.preventDefault()
      //magically helps click events to be more precise
      if(e.target){
        debounce(function(){
          e.target.click()
        }, 300, true)()
      }
    }, false)
  }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Remove rubberband scrolling from web apps on mobile safari and standalone (iOS)</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<style>
	html, body {margin: 0; padding: 0; width:100%; height:100%; overflow: hidden; background: #333}
	p.center {
	position: absolute;
	width: 50%;
	font-size: 30px;
	font-family: Ubuntu, Arial, sans-serif;
	color: #ededed;
	top: 40%;
	left: 50%;
	margin-left: -25%;
	text-align: center;
	}
	</style>
	</head>

	<script>
	/**
	* Small helper class to detect os
	*/
	var Device = new (function() {
	var userAgent = navigator.userAgent \|\| navigator.vendor \|\| window.opera;
	// Windows Phone must come first because its UA also contains "Android"
	this.windows = /windows phone/i.test(userAgent)
	this.android = /android/i.test(userAgent)
	// iOS detection from: http://stackoverflow.com/a/9039885/177710
	this.ios = /iPad\|iPhone\|iPod/.test(userAgent) && !window.MSStream
	})();

	/**
	* Execute any function with debounce of given wait amount
	* @param {number} wait wait amount in miliseconds to bounce
	* @param {boolean} immediate true for immidate execution
	*/
	function debounce(func, wait, immediate) {
	var timeout
	return function() {
	var context = this, args = arguments
	var later = function() {
	timeout = null
	if (!immediate) func.apply(context, args)
	}
	var callNow = immediate && !timeout
	clearTimeout(timeout)
	timeout = setTimeout(later, wait)
	if (callNow) func.apply(context, args)
	}
	}
	</script>
	<body>
	<p class="center">Try pulling down this page with touch in iPhone/iPad, at last nothing happens! No rubberband scroll or zoom in-out.</p>
	<script>
	if(Device.ios){
	//need to add event after body created
	document.body.addEventListener('touchmove', function(e) {
	e.preventDefault()
	//magically helps click events to be more precise
	if(e.target){
	debounce(function(){
	e.target.click()
	}, 300, true)()
	}
	}, false)
	}
	</script>
	</body>
	</html>