Skip to content

Instantly share code, notes, and snippets.

@cvan

cvan/page-dimensions.html

Created July 19, 2018 01:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cvan/b18e384cdf0979b3ce7dbe2d1cce84f1 to your computer and use it in GitHub Desktop.
Save cvan/b18e384cdf0979b3ce7dbe2d1cce84f1 to your computer and use it in GitHub Desktop.
Download ZIP
get HTML document page dimensions with JavaScript
Raw
page-dimensions.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
body { font-size: 3rem; padding: 3rem; }
p { margin: 1rem 0; }
.measure { position: absolute; top: 0; left: 0; right: 0; }
</style>
</head>
<body>
<div class="measure" style="width: 980px; height: 551px; background-color: red"></div>
<div id="logs" class="logs"></div>
<script>
(function () {
const log = str => window.logs.innerHTML += `<p>${str}</p>`;
recalc();
window.addEventListener('resize', recalc);
function recalc () {
window.logs.innerHTML = '';
log(`document client width: ${document.documentElement.clientWidth}`);
log(`document client height: ${document.documentElement.clientHeight}`);
log(`\n\n`);
log(`window inner width: ${window.innerWidth}`);
log(`window inner height: ${window.innerHeight}`);
log(`\n\n`);
log(`window outer width: ${window.outerWidth}`);
log(`window outer height: ${window.outerHeight}`);
log(`\n\n`);
log(`window screen width: ${window.screen.width}`);
log(`window screen height: ${window.screen.height}`);
log(`\n\n`);
log(`window screen available width: ${window.screen.availWidth}`);
log(`window screen available height: ${window.screen.availHeight}`);
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment