<!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>