缩放网页内容上的特定元素（HTML、CSS、JavaScript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17782465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zoom specific element on webcontent (HTML,CSS,JavaScript)
提问by Bram
I want to zoom only a specific element of my website (a certain div), if a user zooms the website on a mobile device. The following picture shows my idea:
如果用户在移动设备上缩放网站，我只想缩放我网站的特定元素（某个 div）。下图展示了我的想法：
As you can see, the test is zoomed but the top div stays the same size; only the div that contains test is zoomed / scaled.
如您所见，测试被放大，但顶部 div 保持相同大小；只有包含测试的 div 被缩放/缩放。
Could someone give me some tips on how to achieve this? I really don't know where to start.
有人可以给我一些关于如何实现这一目标的提示吗？我真的不知道从哪里开始。
UPDATE: http://jsfiddle.net/WyqSf/. if I would zoom in on this page, it would scale both elements. I want to adjust just the content element when zooming. One way I can think of to achieve this is to retrieve the user-input and use javascript to adjust the div's width but this is contradictory with the usual behavior.
更新：http: //jsfiddle.net/WyqSf/。如果我放大此页面，它将缩放两个元素。我只想在缩放时调整内容元素。我能想到的一种方法是检索用户输入并使用 javascript 来调整 div 的宽度，但这与通常的行为相矛盾。
Pseudo-code:
伪代码：
container.mousemove {
content.changeWidth();..
}
采纳答案by 1nfiniti
In order to do this, you would need to fix the user's viewport so that they cannot pinch zoom the page, and then use a touch events library like Hammer.jsto attach a callback to the pinch zoom gesture that appropriately resizes the element on the page you'd like to scale.
为了做到这一点，您需要修复用户的视口，以便他们无法捏合缩放页面，然后使用像Hammer.js这样的触摸事件库将回调附加到捏合缩放手势，以适当地调整页面上元素的大小您想要缩放的页面。
viewport fixing happens in the head element of your html:
视口修复发生在 html 的 head 元素中：
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
you would use hammer.js to detect a "pinch zoom" gesture, and the library gives you a very detailed event.gesture object which you can use to detect how much/how fast the user is zooming.
您将使用hammer.js 来检测“捏缩放”手势，该库为您提供了一个非常详细的 event.gesture 对象，您可以使用它来检测用户缩放的速度/速度。
The change in distance between the 2 touch points while pinching is represented by event.gesture.scale (see hammer documentation), if the scale increases, increase the text accordingly ... if it decreases decrease the text-size. Use Math:
捏合时 2 个接触点之间距离的变化由 event.gesture.scale 表示（请参阅锤子文档），如果比例增加，则相应地增加文本……如果减小，则减小文本大小。使用数学：
$('body').hammer().on("pinch", function(event) {
console.log(event.gesture.scale);
// do math...
});
I imagine you get the idea...
我想你明白了……
回答by Arun Bertil
You could use the Zoomoozplugin. Inside the documentation, check the Zooming inside a containersection -- this is what you may need:
您可以使用Zoomooz插件。在文档中，检查容器内的缩放部分——这就是您可能需要的：
<div class="zoomViewport">
<div class="zoomContainer">
<div class="zoomTarget">Target 1</div>
<div class="zoomTarget">Target 2</div>
</div>
</div>
