如果用户在移动设备上缩放网站,我想仅缩放我的网站的特定元素(某个div).下图显示了我的想法：
你可以看到,测试是缩放的,但顶部的div保持不变的大小;只有包含测试的div被缩放/缩放.
有人可以给我一些关于如何实现的提示吗？我真的不知道从哪里开始.
更新：http://jsfiddle.net/WyqSf/.如果我放大这个页面,它会缩放两个元素.我想在缩放时调整内容元素.我可以想到的一个方法是获取用户输入并使用javascript来调整div的宽度,但这与通常的行为是矛盾的.
伪代码：
container.mousemove {
content.changeWidth();..
}
解决方法
为了做到这一点,您需要修复用户的视口,以便它们不能缩小页面,然后使用触摸事件库(如
Hammer.js)将回调附加到缩放手势,以适当地调整页面上的元素大小我喜欢规模
视口固定发生在您的HTML的头元素中：
<Meta name="viewport" content="width=device-width,maximum-scale=1.0">
您将使用hammer.js来检测“捏缩”手势,该库为您提供了一个非常详细的event.gesture对象,您可以使用它来检测用户缩放的多少/多快.
如果缩放比例增加,则由event.gesture.scale(see hammer documentation)表示2个接触点之间的距离变化,如果缩小了文本大小,则增加文本.使用数学：
$('body').hammer().on("pinch",function(event) {
console.log(event.gesture.scale);
// do math...
});
我想象你得到的想法…
