在webcontent上缩放特定元素（HTML，CSS，JavaScript）

Question

如果用户在移动设备上缩放网站，我想仅缩放我网站的特定元素（某个div）。下图显示了我的想法：

正如您所看到的，测试是缩放的，但顶部div保持相同的大小;只有包含测试的div才会被缩放/缩放。

有人可以给我一些如何实现这一目标的提示吗？我真的不知道从哪里开始。

更新：http://jsfiddle.net/WyqSf/。如果我放大这个页面，它会缩放两个元素。我想在缩放时调整内容元素。我能想到的一种方法是检索用户输入并使用javascript来调整div的宽度，但这与通常的行为相矛盾。

的伪代码：

container.mousemove {
   content.changeWidth();..
}

Answer 1

要执行此操作，您需要修复用户的视口，以便他们无法缩放页面，然后使用触摸事件库（如Hammer.js）将回调附加到适当的缩放手势调整您要缩放的页面上的元素大小。

视口修复发生在html的head元素中：

<meta name="viewport" content="width=device-width, maximum-scale=1.0">

您可以使用hammer.js来检测“捏缩放”手势，并且该库会为您提供一个非常详细的event.gesture对象，您可以使用它来检测用户缩放的速度/速度。

捏合时2个触摸点之间的距离变化由event.gesture.scale（see hammer documentation）表示，如果比例增加，则相应地增加文本...如果减小则减小文本大小。使用数学：

$('body').hammer().on("pinch", function(event) {
    console.log(event.gesture.scale);
    // do math...
});

我想你明白了......

Answer 2

您可以使用Zoomooz插件。在文档中，查看Zooming inside a container部分 - 这是您可能需要的内容：

<div class="zoomViewport">
    <div class="zoomContainer">
        <div class="zoomTarget">Target 1</div>
        <div class="zoomTarget">Target 2</div>
    </div>
</div>

Check the JS Fiddle