कॉर्डोवा/आयनिक

Question

में एक विशिष्ट div में ज़ूमिंग मैंने ज़ूमिंग/स्केलिंग की अनुमति देने वाले गुणों के साथ व्यूपोर्ट जोड़ा। और मैं मूल कोड के लिए इन कहा:

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

मैं ज़ूम करने के लिए कर रहा हूँ, लेकिन मेरे विचार के साथ साथ, ion-header-bar और ion-nav-bar जूम हो जाता है। मैंने इसे स्थिर रखने के लिए हेडर सीएसएस देने की कोशिश की:

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> 

पुनश्च: यह कोई बात अगर मैं ion-view के अंदर एक पूर्ण HTML कोड (मेटा व्यूपोर्ट, कोई हेडर, लेकिन बॉडी और डिवीज़ के साथ) जोड़ें?

Answer 1

मैं इसी तरह की कार्यक्षमता प्राप्त करना चाहता था और ion-scroll का उपयोग करके इसे काम करने में सक्षम था।

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

Answer 2

एक अन्य समाधान बहु स्पर्श इशारों के लिए hammerjs उपयोग करने के लिए और नक्शा बाहर पिंच और में पिंच सीएसएस का उपयोग कर सामग्री ज़ूम करने के लिए हो सकता है।

कुछ इस तरह:

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