缩放Web内容上的特定元素（HTML，CSS，JavaScript） [英] Zoom specific element on webcontent (HTML,CSS,JavaScript)

问题描述

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

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.

有人可以给我一些实现该目标的技巧吗？我真的不知道从哪里开始。

Could someone give me some tips on how to achieve this? I really don't know where to start.

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

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.

伪代码：

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

推荐答案

为此，您需要修复用户的视口使其无法放大页面，然后使用 Hammer.js 之类的触摸事件库将回调附加到

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.js to attach a callback to the pinch zoom gesture that appropriately resizes the element on the page you'd like to scale.

视口固定发生在HTML的head元素中。

viewport fixing happens in the head element of your html:

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

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

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.

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

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:

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

我想你知道这个主意...

I imagine you get the idea...

这篇关于缩放Web内容上的特定元素（HTML，CSS，JavaScript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！