title: My web project zooming picture is not working on android device but ios is nice
body: <ol>
  <li>My project used ionicframework, the image zooming is useing H5's tag scroll &amp; div.</li>
  <li>This is my js &amp; Html code..</li>
  <li>can you help me ?</li>
  <li>I will be vary grateful</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  app.register.directive('zoomable', function(scroll) {
           return {
               link: function(scope, element, attrs) {
                   element.bind('load', function() {
                       var container = document.getElementById(scope.item.id);
                       var clientWidth = 0;
                       var clientHeight = 0;
   
                       var scroller = new Scroller(scroll.render(container), {
                           scrollingX: true,
                           scrollingY: true,
                           animating: true,
                           bouncing: true,
                           locking: true,
                           zooming: true,
                           minZoom: false,
                           maxZoom: 1.5
                       });
   
                      
                       var rect = container.getBoundingClientRect();
                       scroller.setPosition(rect.left + container.clientLeft, rect.top + container.clientTop);
                       var image = document.getElementById(scope.item.id);
                       var contentWidth = image.width;
                       var contentHeight = image.height;
                       var reflow = function() {
                           clientWidth = container.clientWidth;
                           clientHeight = container.clientHeight;
                           scroller.setDimensions(clientWidth, clientHeight, contentWidth, contentHeight);
                       };
                       window.addEventListener("resize", reflow, false);
                       reflow();
                       if ('ontouchstart' in window) {
                           container.addEventListener("touchstart", function(e) {
                               if (e.touches[0] &amp;&amp; e.touches[0].target &amp;&amp;
   e.touches[0].target.tagName.match(/input|textarea|select/i)) {
                                   return;
                               }
                               scroller.doTouchStart(e.touches, e.timeStamp);
                               e.preventDefault();
                           }, false);
                           document.addEventListener("touchmove", function(e) {
                               scroller.doTouchMove(e.touches, e.timeStamp, e.scale);
                           }, false);
                           document.addEventListener("touchend", function(e) {
                               scroller.doTouchEnd(e.timeStamp);
                           }, false);
                           document.addEventListener("touchcancel", function(e) {
                               scroller.doTouchEnd(e.timeStamp);
                           }, false);
                       } else {
                           var mousedown = false;
                           container.addEventListener("mousedown", function(e) {
                               if (e.target.tagName.match(/input|textarea|select/i)) {
                                   return;
                               }
                               scroller.doTouchStart([{
                                   pageX: e.pageX,
                                   pageY: e.pageY
                               }], e.timeStamp);
                               mousedown = true;
                           }, false);
                           document.addEventListener("mousemove", function(e) {
                               if (!mousedown) {
                                   return;
                               }
                               scroller.doTouchMove([{
                                   pageX: e.pageX,
                                   pageY: e.pageY
                               }], e.timeStamp);
                               mousedown = true;
                           }, false);
                           document.addEventListener("mouseup", function(e) {
                               if (!mousedown) {
                                   return;
                               }
                               scroller.doTouchEnd(e.timeStamp);
                               mousedown = false;
                           }, false);
                           container.addEventListener(navigator.userAgent.indexOf("Firefox") &gt; -1
   ? "DOMMouseScroll" : "mousewheel", function(e) {
                               scroller.doMouseZoom(e.detail ? (e.detail * -120) : e.wheelDelta, e.timeStamp, e.pageX, e.pageY);
                           }, false);
                       }
                   });
               }
           }
       })
  
  
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
      &lt;ion-slide-box&gt;
         &lt;ion-slide  ng-repeat="item in imageInfo.works" &gt;
             &lt;div id="{{item.id}}"  class="big_img_show box" style="width:100%"&gt;
               &lt;img ng-src="{{item.img}}" zoomable id="{{item.id}}" on-hold="savePhoto()" style="width:100%;"&gt;
             &lt;/div&gt;
       &lt;/ion-slide&gt;
     &lt;/ion-slide-box &gt;</code></pre>
  </div>
  </div>
  </p>