浏览器缩放时查找任何 DOM 元素的实际高度答案

【问题标题】：Find real height of any DOM element when browser zoomed浏览器缩放时查找任何 DOM 元素的实际高度
【发布时间】：2013-02-02 13:12:45
【问题描述】：

有什么方法可以找到渲染在 DOM 上的元素的高度。

即使我放大/缩小，它也应该给我元素的实际高度。目前我用过：

HTML：

<div >
    <span><img src="Desert.jpg" style="border:none;width:100px" id="imgdiv"/></span>
    <br/>
    <input type="button" id="heightcalc" value="Find Height" />
</div>

jQuery：

$('#heightcalc').click(function(){
    alert($('#imgdiv').height());
});

现在使用 100% 缩放图像的高度为 75。使用 200%/300%/400% 缩放，高度相同，即 75。我的要求是，每当我增加缩放时，高度也应该改变。有什么办法可以找到图像的相对高度。我在 IE9、Chrome/Firefox 中尝试过 - 结果是一样的。

另外，我确实尝试过使用 clientHeight、offsetHeight、outerHeight 没有运气！

非常感谢任何帮助。

谢谢阿尼尔班

【问题讨论】：

你为什么不找到缩放量并乘以它的宽度和高度？
how to find zoom
@inhan 我如何从浏览器中找到缩放量？
.css('zoom')) 但有些浏览器有其他 css 实现，例如 -moz-transform 它返回类似 scale(0.5) 你可能实际上写一个收集/改变它的条件函数。

标签： jquery dom height zooming

【解决方案1】：

我使用以下方法计算所有浏览器的缩放效果：

https://github.com/yonran/detect-zoom

通过这个可以得到乘法因子，然后将该因子乘以元素的实际高度。

这里是代码：请注意我正在为我们的应用程序使用 require js。

require(["Widgets/detectzoom"], function (detectZoom) {
                zoom = detectZoom.ratios();
            });

            var heightofeachNode = ($("#dmcontent  ul li a span").eq(0).height()) * zoom.devicePxPerCssPx;
            self.pageSize = Math.round(($("#dmcontent").height()) / heightofeachNode) + 20 ;//20 - Its is the offset value

我已经在所有浏览器[IE9、Chrome18.0、FF 11.0]中测试过

希望这会有所帮助。

阿尼尔班

【讨论】：

仅供参考：detect-zoom 不再适用于 FireFox 或 Chrome