如何在移动 Web UI 上实现选择性收缩缩放

Question

我想修改一个基于浏览器的电子书阅读器界面，以便用户可以触摸缩放（捏缩放）内容（电子书的页面，div 中的 SVG），但不会导致 UI 元素也缩放（底部的固定栏和各种滑入式元素）。

目前，UI 元素位于页面底部的 position:fixeddiv 中，该div 响应式调整大小，使其始终是一个方便的比例。我们想要有选择地允许缩放的"页面"位于占据页面大部分的全高div 中，包含 SVG。滑入式元素也是带有position:absolute的div

因此，从本质上讲，我们希望允许用户仅在"页面"div上捏缩放（使用多点触摸屏），但不会导致其他div缩放。

关于如何做到这一点的任何建议？

（我们为桌面浏览器实现了一个滑块缩放界面，它工作正常，但作为移动界面不太直观）

Answer 1

由于我认为没有真正具体的代码可以给你，锤子.js可能是你想要研究的东西。

通过查看他们的入门页面，我想代码会看起来像这样：

 var element = document.getElementById('test_el');
 var hammertime = Hammer(element).on('pinchin', function(event) {
     alert('hello!');
 });