Powiększenie określonego elementu div w Cordova/Ionic

Question

Dodałem okno z właściwościami pozwalającymi na powiększanie/skalowanie. I dodałem je do natywnego kodu:

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

jestem w stanie przybliżyć, ale wraz z moim zdaniem, ion-header-bar i ion-nav-bar zostanie powiększony. Próbowałem podać nagłówek css, aby go naprawić:

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

, ale mimo to zostałby powiększony.

Mój index.html ma ion-header-bar, który zawiera obraz. Szablony wchodzić

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

szablonu w których mogę wymagać powiększenia w danym div jest o „jonowy-view` i wygląda na to:

<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: Czy to ważne, czy ja dodać pełny kod HTML (z meta viewport, bez nagłówka, ale treść i divs) wewnątrz ion-view?

Answer 1

Chciałem uzyskać podobną funkcjonalność i udało mi się ją uruchomić, używając ion-scroll.

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

Answer 2

Innym rozwiązaniem mogłoby być wykorzystanie hammerjs gestów Multi-Touch i map szczypać się i szczypać, by powiększyć zawartość za pomocą CSS.

coś takiego:

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