javascript - How to implement selective pinch-zooming on mobile web UI? -

I would like to modify a browser-based eBookreader interface, such as user zoom-zoom (pinch-zoom) content On (ebook's page, a SVG inside a div), but without zooming UI elements (a certain bar below and the diversity of slide-in elements)

The UI elements are in the position: fixed div at the bottom of the page, which give accountability in size, so that it is always on a convenient scale. "Page" We want to allow zooming to choose, full-height D.V. Slide-in element also has divs with position: absolute

, in short, we can pinch the user to a pinch-zoom (using a multi-touch screen) Want to allow, without just zooming on other pages on the "page" div

Any suggestions on how this can be done?

(We have implemented a slider zoom interface for desktop browsers that works fine, but is less intuitive as the mobile interface)

Since I do not think the code is really unique, the code can give you, maybe there is something you want to see.

I thought the code would look something like this:

  Var element = document.getElementById ('test_el'); Var hammertime = Hummer (element). ('Pinchin', function (event) {warning ('hello!');});