Here you go, this will do it.
My screen is 13.5 x 7.5 inches - it's a 15.3" screen.
This (wrongly) calculates it as 14.22 x 8 - or 16.3"
Don't know why it gives the wrong result - it gives the dpi as 96 which sounds right and checks out in my display settings. (** See edit below for update **)
As I hinted earlier, I've just set the size of an element to be 1"x1" I then get it's size in pixels and calculate the screen's physical size based on the pixels/inch and the screen resolution.
As screen resolution changes, the size returned changes if the screen-mode has black vertical bars on the sides of the screen. That's to say it measures the size of the screen that contains content. I set 1024*768 and got ~ 150pixels of black bars on either side of the screen. The vertical size stayed the same, but the horizontal & diagonal dimensions shrunk.
<!DOCTYPE html>
<html>
<style>
#myDiv
{
width: 1in;
height: 1in;
padding: none;
margin: none;
background-color: black;
}
</style>
<script>
function getSize()
{
var tgt = document.getElementById('myDiv');
tgtX = tgt.clientWidth;
tgtY = tgt.clientHeight;
var width_in = screen.width / tgtX;
var height_in = screen.height / tgtY;
width_in = parseInt(width_in * 100);
width_in /= 100;
diag = Math.sqrt( width_in*width_in + height_in*height_in);
alert('Screen size: ' + width_in + "\" x " + height_in + "\" - Diagonal: " + diag + "\"");
}
</script>
</head>
<body onload='getSize();'>
<div id='myDiv'></div>
<body>
</html>
[EDIT] Setting the width and height to 2.7cm instead of 1in means the square measures 1inch on my screen. This then gives more or less the right results. 13.39" x 7.52" (15.36" diag)