jQuery mobile: change font size on pinch-in/pinch-out?

Question

I'm writing a web document reader with JQM. I don't want my users to continuously scroll right-left when reading, so my viewport is:

<META NAME='viewport' CONTENT='width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=1;' />

Though, I'm aware users preferences with font size may change, due to different visual skills... So, I thought it would be nice to shrink font size on multi-touch shrink action ("pinch-in"), and enlarge font size on multi-touch zoom action ("pinch-out")...

Is it possible? Do I need some external library, beside JQM?

Answer 1

It is possible on jQuery Mobile, but you will need to use a 3rd party implementation called hammer.js.

It supports a large number of gestures like:

• hold
• tap
• doubletap
• drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
• swipe, swipeup, swipedown, swipeleft, swiperight
• transform, transformstart, transformend
• rotate
• pinch, pinchin, pinchout
• touch (gesture detection starts)
• release (gesture detection ends)

Example:

$('#test_el').hammer().on("pinchin", ".nested_el", function(event) {
    console.log(this, event);
});

$('#test_el').hammer().on("pinchout", ".nested_el", function(event) {
    console.log(this, event);
});

It works with jQuery Mobile, and that is important. But you should think of some other idea, or at least another idea for Android 2.X devices because that platform doesn't support multitouch events.

There are also some other 3rd party implementations like Touchy. Unfortunately, Touchy only supports pinch.