如何将 vh 中给定的元素的高度转换为像素？

Posted 2023-03-06

【中文标题】如何将 vh 中给定的元素的高度转换为像素？

【英文标题】：How do I convert a height of an element given in vh to pixels?

【发布时间】：2013-08-25 14:23:27

【问题描述】：

我有一个元素的最大高度为 65vh。我需要在我的 javascript 中将其转换为像素，以查看图像是否适合那里，或者我是否需要缩小/裁剪它。 （正在做win8 App开发）。

这行得通吗？

100 vh = screen.height 因此以像素为单位的 65vh 是 screen.height *0.65

【问题讨论】：

你基本上是在回答你自己的问题。这里真正的问题是：如何找到视口的高度？

【参考方案1】：

不一定是screen.height * 0.65，而是viewport.height * 0.65。尽管 Windows 8 应用程序始终具有相同的高度，但无论捕捉状态如何，这都是基于浏览器的应用程序的一个重要区别。

在 JavaScript 中：

document.documentElement.clientHeight * 0.65;

如果你使用 jQuery，你可以这样做：

$(window).height() * 0.65;

【讨论】：

当您没有向下滚动以缩小 100vh 大于窗口高度的地址栏时，在移动设备上不准确

对于那些试图弄清楚什么是 viewport.height - document.documentElement.clientHeight（或 clientWidth，如果需要）的人。

【参考方案2】：

当我使用$("div").height(); 时，它实际上以像素为单位返回值。

检查这个fiddle。