wolfram77 · August 30, 2015 15:20
diff --git a/screen-size-test.html b/screen-size-test.html
 <!-- @wolfram77 -->
 <!DOCTYPE html>
 <html lang="en">

 <head>
 <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">
 <title>Screen Size Test</title>
 </head>

 <body>


 <script type="text/javascript">
 window.onload = function() {
 	var tstEl = document.getElementById('test-box');
 	var dpi = {'x': tstEl.offsetWidth, 'y': tstEl.offsetHeight};
 	var resEl = document.getElementById('screen-res');
 	var res = {'x': screen.width, 'y': screen.height};
 	resEl.innerHTML = res.x+' x '+res.y;
 	var dimXyEl = document.getElementById('screen-dim-xy');
 	var dimXy = {'x': res.x/dpi.x, 'y': res.y/dpi.y};
 	dimXyEl.innerHTML = dimXy.x.toFixed(2)+'in x '+dimXy.y.toFixed(2)+'in';
 	var dimDiagEl = document.getElementById('screen-dim-diag');
 	var dimDiag = Math.sqrt(dimXy.x*dimXy.x + dimXy.y*dimXy.y);
 	dimDiagEl.innerHTML = dimDiag.toFixed(2)+'in';
 };
 </script>


 <style>
 body {
 	margin: 0;
 }

 h1 {
 	margin-top: 0;
 	padding-top: 2em;
 	padding-bottom: 1em;
 	font-weight: 400;
 	color: #333;
 }

 h1, .info {
 	text-align: center;
 	font-family: "Open Sans", "Helvetica", "Trebuchet MS", sans-serif;
 }

 .info {
 	padding-bottom: 6em;
 }

 .main {
 	margin-top: 0;
 	margin-bottom: 0;
 	border: 1px dashed #DDD;
 	padding: 2em;
 }

 #test-box {
 	width: 1in;
 	height: 1in;
 }

 html {
 	width: 100%;
 	height: 100%;
 }

 #screen-box {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background-color: #EEE;
 }
 </style>


 <div id="screen-box">
 	<h1>Screen Size Test</h1>
 	<div id="test-box">
 	</div>
 	<p class="info main">Resolution: <span id="screen-res">?</span></p>
 	<p class="info main">Dimensions: <span id="screen-dim-xy">?</span> (<span id="screen-dim-diag">?</span> screen)</p>
 </div>

 </body>

 </html>
	<!-- @wolfram77 -->
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">
	<title>Screen Size Test</title>
	</head>

	<body>


	<script type="text/javascript">
	window.onload = function() {
	var tstEl = document.getElementById('test-box');
	var dpi = {'x': tstEl.offsetWidth, 'y': tstEl.offsetHeight};
	var resEl = document.getElementById('screen-res');
	var res = {'x': screen.width, 'y': screen.height};
	resEl.innerHTML = res.x+' x '+res.y;
	var dimXyEl = document.getElementById('screen-dim-xy');
	var dimXy = {'x': res.x/dpi.x, 'y': res.y/dpi.y};
	dimXyEl.innerHTML = dimXy.x.toFixed(2)+'in x '+dimXy.y.toFixed(2)+'in';
	var dimDiagEl = document.getElementById('screen-dim-diag');
	var dimDiag = Math.sqrt(dimXy.xdimXy.x + dimXy.ydimXy.y);
	dimDiagEl.innerHTML = dimDiag.toFixed(2)+'in';
	};
	</script>


	<style>
	body {
	margin: 0;
	}

	h1 {
	margin-top: 0;
	padding-top: 2em;
	padding-bottom: 1em;
	font-weight: 400;
	color: #333;
	}

	h1, .info {
	text-align: center;
	font-family: "Open Sans", "Helvetica", "Trebuchet MS", sans-serif;
	}

	.info {
	padding-bottom: 6em;
	}

	.main {
	margin-top: 0;
	margin-bottom: 0;
	border: 1px dashed #DDD;
	padding: 2em;
	}

	#test-box {
	width: 1in;
	height: 1in;
	}

	html {
	width: 100%;
	height: 100%;
	}

	#screen-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #EEE;
	}
	</style>


	<div id="screen-box">
	<h1>Screen Size Test</h1>
	<div id="test-box">
	</div>
	<p class="info main">Resolution: <span id="screen-res">?</span></p>
	<p class="info main">Dimensions: <span id="screen-dim-xy">?</span> (<span id="screen-dim-diag">?</span> screen)</p>
	</div>

	</body>

	</html>