在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表示(参见锤子文档),如果比例增加,则相应地增加文本...如果减小则减小文本大小.使用数学:

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

我想你会明白这个想法......