放大Cordova / Ionic中的特定div

I added the viewport with properties allowing zooming/scaling. And I added these to the native code:

我添加了具有允许缩放/缩放的属性的视口。我将这些添加到本机代码中：

WebSettings settings = super.appView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(true);
settings.setSupportZoom(true);

I am able to zoom, but along with my view, ion-header-bar and ion-nav-bar gets zoomed. I tried giving the header css, to keep it fixed:

我可以缩放，但随着我的观点，离子标题栏和离子导航栏变焦。我尝试给标头css，以保持它固定：

position: fixed;
top: 0px;
left: 0px;

but still, it'd get zoomed.

但是，它仍然会变焦。

My index.html has an ion-header-bar, which contains an image. The templates go into

我的index.html有一个ion-header-bar，它包含一个图像。模板进入

<ion-nav-view class="has-header"></ion-nav-view>

The template in which I require zooming in a particular div is having a 'ion-view` and it looks like:

我需要放大特定div的模板是'离子视图'，它看起来像：

<ion-view>
    <ion-nav-bar class="bar-stable">
        <ion-nav-buttons side="right">
            icon1
        </ion-nav-buttons>
        <ion-nav-buttons side="left">
            icon2
        </ion-nav-buttons>
    </ion-nav-bar>
    <div>
        Multiple divs in here, which are containers for html and css data we receive via AJAX requests. And this is here I need zooming in.
    </div>
</ion-view>

PS: Would it matter if I add a full HTML code(with meta viewport, no header, but body and divs) inside the ion-view?

PS：如果我在离子视图中添加完整的HTML代码（带有meta视口，没有标题，但是正文和div），这是否重要？

2 个解决方案

#1

I wanted to get similar functionality and was able to get it to work using ion-scroll.

我想获得类似的功能，并能够使用离子滚动使其工作。

<ion-scroll zooming="true" direction="xy" style="width: 100%; ">
  <div></div>
</ion-scroll>

#2

Another solution could be to use hammerjs for multi-touch gestures and map pinch out and pinch in to zoom the content using css.

另一个解决方案可能是使用hammerjs进行多点触控手势，并使用css来缩小和缩小内容以缩放内容。

Something like this:

像这样的东西：

var hammerTime = new Hammer.Manager($('div.youWantToScale')[0], {touchAction: "pan-x pan-y"});
var pinch = new Hammer.Pinch();
var lastZoom;
hammerTime.add(pinch);
hammerTime.on("pinchout pinchin", function(e) {
   var currentZoom = Number($('div.youWantToScale').css("zoom"));
   if (lastZoom) {
      var newZoom = currentZoom + (e.scale - lastZoom);

      //bounds checking for your zoom, min=1 and max=3 here
      newZoom = newZoom < 1 ? 1 : (newZoom > 3 ? 3 : newZoom); 
      $('div.youWantToScale').css("zoom", newZoom);
   } 
   lastZoom = e.scale;
});

hammerTime.on("pinchstart", function (e) {
   //Seems clunky, but reset the lastZoom on a new pinch   
   lastZoom = undefined;
});

#1