Visual Studio 2017 Apache Cordova Project with Zoom - zooming

Question

I have created a small test application using Visual Studio 2017, choosing the "Blank App (Apache Cordova)" option the JavaScript grouping. I have successfully built my application but as I dig further into capabilities, I am wondering how to implement zoom on android. I simply have text on the screen that I want the user to be able to zoom on double tap or pinch. I have done a lot of google searches and stack overflow searches on the subject and I haven't been successful yet. I have tested things such as using meta tags:
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
But simple things like that hasn't worked. I have also tried implementing plugins such as Hammer.js to achieve my goals but haven't been successful yet. Can someone help out? Thanks.

Answer 1

Currently using javascript - hammer.js - is the only supported method of adding pinch zooming. Apache cordova is nothing more than a very basic web browser that lacks things like this.
The hammer.js package can be used add that functionality to it.
http://hammerjs.github.io/recognizer-pinch/
To implement it, follow the example given in this post -> Pinch to zoom using Hammer.js
function hammerIt(elm) {
hammertime = new Hammer(elm, {});
hammertime.get('pinch').set({
enable: true
});
var posX = 0,
posY = 0,
scale = 1,
last_scale = 1,
last_posX = 0,
last_posY = 0,
max_pos_x = 0,
max_pos_y = 0,
transform = "",
el = elm;
hammertime.on('doubletap pan pinch panend pinchend', function(ev) {
if (ev.type == "doubletap") {
transform =
"translate3d(0, 0, 0) " +
"scale3d(2, 2, 1) ";
scale = 2;
last_scale = 2;
try {
if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() != "matrix(1, 0, 0, 1, 0, 0)") {
transform =
"translate3d(0, 0, 0) " +
"scale3d(1, 1, 1) ";
scale = 1;
last_scale = 1;
}
} catch (err) {}
el.style.webkitTransform = transform;
transform = "";
}
//pan
if (scale != 1) {
posX = last_posX + ev.deltaX;
posY = last_posY + ev.deltaY;
max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
if (posX > max_pos_x) {
posX = max_pos_x;
}
if (posX < -max_pos_x) {
posX = -max_pos_x;
}
if (posY > max_pos_y) {
posY = max_pos_y;
}
if (posY < -max_pos_y) {
posY = -max_pos_y;
}
}
//pinch
if (ev.type == "pinch") {
scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
}
if(ev.type == "pinchend"){last_scale = scale;}
//panend
if(ev.type == "panend"){
last_posX = posX < max_pos_x ? posX : max_pos_x;
last_posY = posY < max_pos_y ? posY : max_pos_y;
}
if (scale != 1) {
transform =
"translate3d(" + posX + "px," + posY + "px, 0) " +
"scale3d(" + scale + ", " + scale + ", 1)";
}
if (transform) {
el.style.webkitTransform = transform;
}
});
}
To implement just call it with
hammerIt(document.getElementById("elementId")); after the element has
loaded. You can call this on as many elements as you like.