Pinch and Zoom

HTML

<div id="el">
a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
</div>

CSS

div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  height: 200px;
  overflow: hidden;
}

JavaScript

var viewport = document.createElement("meta");
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(viewport);

var el = document.getElementById('el');

el.addEventListener('gesturechange',function(e){

  el.innerHTML = e.scale;

  if(e.scale>1){
    alert('zoom in');
  }

  else if(e.scale<1){
    alert('zoom out');
  }
});