html - 如何以物理像素获取元素的大小？

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 等臭名昭著的长/宽确定浏览器中。但是，只要您需要的只是一些接近的东西，这应该可以工作。