29

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

在此处输入图像描述

如您所见，测试已缩放，但顶部 div 的大小保持不变；只有包含 test 的 div 被缩放/缩放。

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

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

伪代码：

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

2 回答 2

21

为了做到这一点，您需要修复用户的视口，使他们不能捏缩放页面，然后使用像Hammer.js 之类的触摸事件库将回调附加到捏缩放手势，以适当调整元素的大小您想要缩放的页面。

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

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

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

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

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

我想你明白了……

于 2013-07-29T22:47:48.293 回答
1

您可以使用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>

检查 JS 小提琴

于 2013-07-25T09:01:20.090 回答