javascript - 以非像素单位获取 HTML DOM 元素的 CSS 高度，在我的例子中是英寸

Question

编辑:对于我的问题中宽度和高度的不一致，抱歉，它适用于两者。

编辑 2:无论缩放如何，我仍然得到一个不准确的值，这样做

$('#selector').css('width',$('#selector').css('width')); 实际上调整了元素的大小。

我有一个以英寸为单位的页面元素。 firefox 属性检查器声明了正确的高度 (8.5in) 但使用 $('selctor').css('width') 它以像素为单位返回它 ( “815.66666px”)。这对我来说是有问题的。

我的用例是我在脚本中的某个位置切换大小，我希望稍后能够将其设置回默认大小。在切换大小和设置回默认值之间，用户可能缩放了页面。由于 Firefox(我认为其他浏览器也是如此)不太完美的单位转换，我会根据缩放级别得到不同的舍入误差。例如，在我的页面上将缩放更改为 25% 和 300% 之间的各种级别会为 css('width') 产生以下结果> 在同一元素上:

    >>>   $('#templateDiv0').css('width')
    "815.66666px"
    >>>  $('#templateDiv0').css('width')
    "815.76666px"
    >>>  $('#templateDiv0').css('width')
    "816.33334px"
    >>>  $('#templateDiv0').css('width')
    "816.13334px"

因此，当我稍后需要将其重置为默认大小时，我无法保证这是正确的大小。我真的希望它能返回(8.5 英寸)给我。我想问题是 jQuery 正在以自己的方式检索它，我想以属性检查器的方式检索它，即直接查看样式表。有什么办法吗？

页面的样式表经常更改，因此对值进行硬编码对我来说不是一个好的解决方案。

Answer 1

我的 13 英寸屏幕上有 1366 * 768 像素所以 1inch = (1366*768pixels/13)px = 80699.07px；1px = 13/(1366*768) 英寸 = 1/80699.07 英寸

不幸的是，api 没有给出屏幕尺寸，所以如果您知道屏幕尺寸，那么您可以:

var size = 13;
var width =  $('#templateDiv0');
var widthInches = width * size/(window.screen.width * window.screen.height)