Масштабирование в конкретном div в Кордове/Ионном

Question

Я добавил видовое окно со свойствами, позволяющими масштабирование/масштабирование. И я добавил их в машинный код:

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

Я могу увеличить, но вместе с моей точки зрения, ion-header-bar и ion-nav-bar получает в увеличенном виде. Я попытался дать заголовок css, чтобы он не исправлялся:

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

но все же он бы увеличился.

index.html имеет ion-header-bar, в котором содержится изображение. Шаблоны идут в

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

Шаблон, в котором я требуют масштабирования в определенной DIV оказывает «ион-view` и выглядит следующим образом:

<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: Будет ли это важно, если я добавить полный HTML-код (с метафоном, без заголовка, но с телом и div) внутри ion-view?

Answer 1

Я хотел получить аналогичную функциональность и смог заставить его работать, используя ion-scroll.

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

Answer 2

Другим решением может быть использование hammerjs для мультитач жесты и карта прищипывают и щепотку, чтобы увеличить содержание с помощью CSS.

Что-то вроде этого:

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; 
});