缩放网页内容上的特定元素（HTML、CSS、JavaScript）

Posted 2023-03-06

【中文标题】缩放网页内容上的特定元素（HTML、CSS、JavaScript）

【英文标题】：Zoom specific element on webcontent (HTML,CSS,JavaScript)

【发布时间】：2013-07-20 21:16:19

【问题描述】：

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

如您所见，测试已缩放，但顶部 div 的大小保持不变；只有包含 test 的 div 被缩放/缩放。

有人可以给我一些关于如何实现这一目标的提示吗？我真的不知道从哪里开始。

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

伪代码：

container.mousemove 
   content.changeWidth();..

【问题讨论】：

粘贴一些代码或小提琴。没有代码，我们帮不了多少。使用 CSS。

对于初学者来说看看这个***.com/questions/4049342/…

@sunny。他不想放大整个网站。他只想放大文本部分...

我更新了我的帖子。它现在包括一个基本的小提琴；）感谢您提前提供帮助。

您可以尝试添加事件侦听器并阻止默认设置（用户无法缩放页面），然后缩放特定元素

【参考方案1】：

您可以使用Zoomooz 插件。在文档中，查看Zooming inside a container 部分——这可能是您需要的：

<div class="zoomViewport">
    <div class="zoomContainer">
        <div class="zoomTarget">Target 1</div>
        <div class="zoomTarget">Target 2</div>
    </div>
</div>

Check the JS Fiddle

【讨论】：

JSFiddle 在移动设备上无法正常工作（我们不能使用捏合缩放）。

【参考方案2】：

为了做到这一点，你需要修复用户的视口，使他们不能捏缩放页面，然后使用像Hammer.js这样的触摸事件库来为捏缩放手势附加回调，以适当调整页面大小您要缩放的页面上的元素。

视口修复发生在 html 的 head 元素中：

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

您将使用hammer.js 来检测“捏缩放”手势，该库为您提供了一个非常详细的 event.gesture 对象，您可以使用它来检测用户缩放的程度/速度。

捏合时两个触摸点之间的距离变化由 event.gesture.scale (see hammer documentation) 表示，如果比例增加，则相应地增加文本……如果减少，则减小文本大小。使用数学：

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

我想你明白了......

【讨论】：

感谢您的回答。我将看看建议的库。我会给你 50 分，因为你的答案对我来说似乎很可靠。

请注意，对于新的 HammerJS 版本（至少 2.0.4），事件对象具有不同的成员，并且将缺少“手势”成员。相反，您可以将 event.scale 用于较新的 HammerJS 版本。查看完整事件对象布局的 API 参考：hammerjs.github.io/api

maximum-scale=1.0 不修复桌面环境中的视口缩放