缩放网页内容上的特定元素(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 保持相同大小；只有包含 test 的 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...

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