如何获得物理像素中元素的大小？

Question

假设我有div我已定义为(32px, 32px)的大小：

HTML ：

<div id="theBox"></div>

CSS ：

div {
    width: 32px;
    height: 32px;
    background-color: gray;
}

（Live jsFiddle view）

如何以像素为单位获取盒子的实际尺寸？

您会注意到该框不一定是32px。它可以更大：

或更小：

或完全32 pixels：

差异的原因当然是因为Chrome和Internet Explorer允许我缩放。

我想知道元素的 实际 大小。为什么？没理由;只是因为。我很好奇，我想拓宽人类知识和理解的极限。

或者因为我需要设置Canvas元素的内部分辨率以匹配canvas元素的实际大小 - 否则渲染的画布内容将在未经我许可的情况下被拉伸：< / p>

虽然，我想知道元素大小的原因并不一定只适用于Canvas。我问的是一个泛型的div元素;答案将用于canvas，img，video以及我想要的任何其他内容。

Answer 1

您需要检测缩放级别。

然后写一个简单的算术比例来计算'实际'尺寸，或者用户看到的尺寸。

var zoomLevel,
, actualSize = 32
, viewSize;
function getZoomLevel(){ ... your code here...return zoomLevel;}

function getViewSize(actualSize){
  viewSize = actualSize*getZoomLevel();
  return viewSize;
}

然后......准备好后致电getViewSize() ......

希望数学很清楚。 求解y（或viewSize）：

actualSize/1 = y/zoomLevel

但是，您需要注意子像素精度，尤其是在IE9等众所周知的长度/宽度较差的浏览器中。但是，只要你需要的东西很接近，这应该有效。