在webcontent上放大特定元素(HTML,CSS,JavaScript)

前端之家收集整理的这篇文章主要介绍了在webcontent上放大特定元素(HTML,CSS,JavaScript)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果用户在移动设备上缩放网站,我想仅缩放我的网站的特定元素(某个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...
});

我想象你得到的想法…

原文链接:https://www.f2er.com/html/230699.html

猜你在找的HTML相关文章