Skip to content

Instantly share code, notes, and snippets.

@tominal

tominal/size.html

Created October 17, 2017 19:40
Show Gist options
  • Save tominal/baf441e2c02c9fe8444708999760335c to your computer and use it in GitHub Desktop.
Save tominal/baf441e2c02c9fe8444708999760335c to your computer and use it in GitHub Desktop.
Download ZIP
Width and height of the current window.
Raw
size.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Browser Size Calculator</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #222;
color: #eee;
font-family: sans-serif;
}
.wrap {
color: hotpink;
font-weight: 100;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0;
}
</style>
</head>
<body onresize="updateSize();">
<div class="wrap">
<p><b>Width: </b><span id="width"></span></p>
<p><b>Height: </b><span id="height"></span></p>
</div>
<!-- <p>When you die, your email will quickly be overrun by spam.<br/>Like wilderness taking back an abandoned city.</p> -->
<script type="text/javascript">
function updateSize(){
var width = document.getElementById("width");
var height = document.getElementById("height");
width.innerHTML = (document.body.clientWidth || window.innerWidth) + "px";
height.innerHTML = (document.body.clientHeight || window.innerHeight) + "px";
}
document.addEventListener("DOMContentLoaded", function(event) {
updateSize();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment