跨浏览器 jQuery 文本缩放实现答案

【问题标题】：Cross-Browser jQuery text-zoom implementation跨浏览器 jQuery 文本缩放实现
【发布时间】：2010-12-31 00:50:07
【问题描述】：

我有一些代码可以增加/减少字体大小。这让我很头疼，因为每个浏览器似乎都以不同的方式实现$.css('font-size') (see jquery bug)。不过，真正让我感到沮丧的是，Firefox 可以正常放大，但是当我使用下面的缩小功能时，它放大了。 Webkit 和 IE 都按预期工作。有什么想法吗？

我把它放在这里：http://jsfiddle.net/srQ3P/1/ 在那里你可以看到它按预期工作，你可以在项目页面上看到它在 Firefox 中被破坏：http://cumberlandme.info/residents

主要编辑

抱歉，问题不是代码，而是 firefox 错误行为。在我使用浏览器控件（ctrl + plus 或 ctrol + minus）放大或缩小后，js 变得混乱。这在其他浏览器中不会发生。这是真正的问题。关于那个

的任何建议

【问题讨论】：

我很好奇，为什么要实现你自己的东西？我所知道的所有主要浏览器都有缩放功能，这似乎是用户代理的事情，而不是你的问题......
我完全同意。我一直认为，当网站提供小的加号文本、减号文本按钮时，这是愚蠢的。但正如我从我的客户那里“学到的”；）很多人不知道这种浏览器方法，因此该网站应该提供按钮。所以我可以让它保持原样，它工作得很好。但我讨厌没有“尽可能完美”，你知道吗？
我在 macOS 上安装了 Firefox，它接缝工作得非常好。而有浏览问题的人，完全知道浏览器有缩放功能:)

标签： jquery cross-browser zooming font-size

【解决方案1】：

这种情况下的问题在于我的 javascript 文本缩放功能。我使用的原始函数（在网上找到）在正文字体样式中查找特定的 em 值，如果没有找到，请将字体大小重置为“1em”。像这样：

if (document.body.style.fontSize == "")
    document.body.style.fontSize = "1em";
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.1) + "em";

这在 IE 上可以正常工作（为什么，我不知道），但在 Ffx 上不行。所以我想出的解决方案是检查 IE，并根据浏览器是否为 IE 做些不同的事情。 jQuery 文档建议不要以这种方式检查浏览器，这毫无价值，但我还是这样做了！

var currSz = parseFloat($('body').css('font-size'));
Math.round(currSz);

if($.browser.msie)
    currSz++;
else
    currSz = currSz + .7;

$('body').css('font-size',currSz);

【讨论】：