I recently bought a new MacBook Pro, complete with the MultiTouch trackpad. One issue I have with it, is that I can’t use the pinch zoom gesture with web based maps or images. It increases font size, instead of zooming. So I donned my cape and exclaimed “This looks like a job for JAVASCRIPT!”
First, I wanted to see if the zoom gesture was sending any key events (particularly the cmd+= and cmd+-). It was a long shot, and as you would expect, it wasn’t the case.
The option was to monitor a particular div, whose height is constrained to the single letter ‘M’ (for Em… get it?). It works, but you’ve got a limited number of zoom levels.
You can test it out my horrid zoom detection yourself. You don’t need a MultiTouch trackpad, the keyboard shortcuts for increasing/decreasing text size should work.
Other issues: modern browsers resize all text. I had hoped to get around that by converting Em’s to px (16px to 1em in WebKit, in case you were wondering), but that didn’t work. A workaround would be to detect the amount of change in height, then *downsize* the font using CSS px, but I decided it’s probably best to stop experimenting with it.
It’s possible that the browser is sending a mouse event, but I hadn’t checked that quite yet. If/when I get some time, I may report back. Or you maybe someone reading will take this idea and run with it. Just let me know, okay?
