如何以物理像素为单位获取元素的大小？

Question

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

html :

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

css :

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

（实时 jsFiddle 视图）

如何以像素为单位获得框的实际大小？

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

或更小：

或者确切地说32 pixels：

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

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

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

虽然，我想知道元素大小的原因不一定只适用于 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 等众所周知的糟糕的长度/宽度确定浏览器中。但是，只要您需要的只是接近的东西，这应该可行。