title: Adding pinch-zoomable div image to a non-scalable viewport on mobile devices
body: <p>Consider the following viewport meta tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" /&gt;
  </code></pre>
  
  <p>The content on the page is non-scalable and mobile responsive. Sometimes, I need to overlay a large image on top of it, and allow the user to pinch-zoom that image.</p>
  
  <pre><code>#overlay_div {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: #dddddd;
      z-index: 550000;
      overflow: scroll;
      -webkit-overflow-scrolling: touch;
  }
  
  &lt;div id="overlay_div"&gt;
      &lt;img src="largeimage.jpg" width="100%"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently, I am aware of two possible options:</p>
  
  <ol>
  <li>Programmatically change the viewport meta to allow user scaling (possible cross-browser implications, also causes content underneath to scale which is not desirable)</li>
  <li>Use hammer.js to manually handle the pinch event and scale the div/image accordingly (seems very complex possible compatibility implications).</li>
  </ol>
  
  <p>Does anyone know the proper way to do this, especially for cross-browser compatibility? I am hoping there may be a simple CSS solution.</p>
  
  <p>Thanks</p>