How To Get Size Of An Element In Physical Pixels?

Let's say i have a div that i've defined to be (32px, 32px) in size: html:

css: div { width: 32px; height: 32px; background-color:

Solution 1:

You would need to detect the zoom level.

Then write a simple arithmetic proportion to calculate the 'actual' size, or the size as it appears to the user.

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

functiongetViewSize(actualSize){
  viewSize = actualSize*getZoomLevel();
  return viewSize;
}

Then ... call getViewSize() when ready ...

Hopefully the math is clear enuff. Solving for y (or viewSize):

actualSize/1 = y/zoomLevel

However, you will need to be careful about sub-pixel precision, especially among the notoriously bad length/width determining browsers like IE9. But, as long as all you need is something close, this should work.