cognitom/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <style>
    body {
      margin: 40px 0 0 0;
      padding: 0;
    }
    header,
    footer {
      position: absolute;
      left: 0;
      right: 0;
      background: black;
      color: white;
      height: 20px;
      padding: 10px;
    }
    header { top: 0 }
    footer { bottom: 0 }
    section {
      position: absolute;
      top: 40px;
      bottom: 40px;
      left: 0;
      right: 0;
      overflow: hidden;
    }
  </style>
  <script>
    var pinching = false;
    var d0 = 1;
    var d1 = 1;
    document.addEventListener("touchmove", function(e){
      if (e.touches.length == 2) {
        if (!pinching) {
          pinching = true;
          d0 = Math.sqrt(
            Math.pow(e.touches[1].screenX - e.touches[0].screenX, 2) +
            Math.pow(e.touches[1].screenY - e.touches[0].screenY, 2)
          );
        } else {
          d1 = Math.sqrt(
            Math.pow(e.touches[1].screenX - e.touches[0].screenX, 2) +
            Math.pow(e.touches[1].screenY - e.touches[0].screenY, 2)
          );
          document.querySelector("section").style.zoom = d1 / d0;
        }
      }
    });
    document.addEventListener("touchend", function(e){
      pinching = false;
    });
  </script>
</head>

<body>
  <header id="a">HEADER</header>
  <section id="b">
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
  </section>
  <footer id="c">FOOTER</footer>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
	<style>
	body {
	margin: 40px 0 0 0;
	padding: 0;
	}
	header,
	footer {
	position: absolute;
	left: 0;
	right: 0;
	background: black;
	color: white;
	height: 20px;
	padding: 10px;
	}
	header { top: 0 }
	footer { bottom: 0 }
	section {
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 0;
	right: 0;
	overflow: hidden;
	}
	</style>
	<script>
	var pinching = false;
	var d0 = 1;
	var d1 = 1;
	document.addEventListener("touchmove", function(e){
	if (e.touches.length == 2) {
	if (!pinching) {
	pinching = true;
	d0 = Math.sqrt(
	Math.pow(e.touches[1].screenX - e.touches[0].screenX, 2) +
	Math.pow(e.touches[1].screenY - e.touches[0].screenY, 2)
	);
	} else {
	d1 = Math.sqrt(
	Math.pow(e.touches[1].screenX - e.touches[0].screenX, 2) +
	Math.pow(e.touches[1].screenY - e.touches[0].screenY, 2)
	);
	document.querySelector("section").style.zoom = d1 / d0;
	}
	}
	});
	document.addEventListener("touchend", function(e){
	pinching = false;
	});
	</script>
	</head>

	<body>
	<header id="a">HEADER</header>
	<section id="b">
	<p>Hello world!</p>
	<p>Hello world!</p>
	<p>Hello world!</p>
	<p>Hello world!</p>
	<p>Hello world!</p>
	<p>Hello world!</p>
	<p>Hello world!</p>
	<p>Hello world!</p>
	<p>Hello world!</p>
	<p>Hello world!</p>
	</section>
	<footer id="c">FOOTER</footer>
	</body>

	</html>