title: How to get same coordinates from pointer events as from touch events while viewport is zoomed?
body: <p>I was trying to use pointer events (e.g. <code>pointerdown</code>) instead of combining touch (e.g. <code>touchstart</code>) and mouse (e.g. <code>mousedown</code>) events to figure out the input event coordinates.</p>
  
  <pre><code>var bodyElement = document.body;
  
  bodyElement.addEventListener("touchstart", function(e) {console.log("touch: " + e.changedTouches[0].clientX + " " + e.changedTouches[0].clientY);});
  bodyElement.addEventListener("pointerdown", function(e) {console.log("point: " + e.clientX + " " + e.clientY);});
  </code></pre>
  
  <p>All works fine until the viewport gets zoomed (e.g. android chrome zooms the webpage, device toolbar zoom factor in chrome's dev tools is other than 100%, ...). The pointer events then start reporting completely wrong values.</p>
  
  <p>You can observe the error in following screenshots:</p>
  
  <p>1) viewport scaled to 100%, 300px*300px div clicked to bottom right corder:
  <img src="https://i.imgur.com/WmNEFAe.jpg" alt="unzoomed"></p>
  
  <p>2) viewport scaled to 150%, 300px*300px div clicked to bottom right corner:
  <img src="https://i.imgur.com/AJAYIIF.jpg" alt="zoomed"></p>
  
  <p>Do you guys know how to get the correct coordinates from pointer events?</p>
  
  <p>Edit:<br>
  Added jsfiddle: <a href="https://jsfiddle.net/krompac/L3tbsyax/4/" rel="nofollow noreferrer">jsfiddle</a>  </p>