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

比方说，我有我已经定义了一个div在尺寸(32px, 32px)：如何获取物理像素中元素的大小？

HTML：

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

CSS：

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

（Live jsFiddle view）

如何获得像素的框的实际大小？

你会注意到盒子不一定是32px。它可以更大：

enter image description here

或更小：

enter image description here

或精确32 pixels：

enter image description here

的原因不同，当然，是因为Chrome和Internet Explorer允许我使用zoom。

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

还是因为我需要设置一个Canvas元件的内部分辨率匹配实际大小的画布元素的 - 否则渲染画布内容将被拉伸未经我的许可：

enter image description here

虽然，我想知道元素大小的原因不一定只适用于Canvas。我在问一个普通的div元素;答案将用于canvas,img,video，以及任何我想要的东西。

来源

2013-06-24 Ian Boyd

有趣的问题，这个答案可以帮助你：http://stackoverflow.com/a/5078596/188331？ – Raptor

您需要检测缩放级别。

然后编写一个简单的算术比例来计算'实际'尺寸或尺寸，因为它显示给用户。

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

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

然后......调用getViewSize()准备时...

希望算算清楚句话之后B。求解Y（或viewSize）：

actualSize/1 = y/zoomLevel

但是，则需要小心子像素精度，尤其是在众所周知的不良长度/宽度确定像IE9浏览器。但是，只要你所需要的东西都接近，这应该起作用。

来源

2013-06-24 04:01:39 cliffbarnes

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

回答

相关问题