Skip to content

Instantly share code, notes, and snippets.

@rswift

rswift/window_size_info.html

Last active September 2, 2021 08:36
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 rswift/33da2ff5005f19648ccf105a31adc6cb to your computer and use it in GitHub Desktop.
Save rswift/33da2ff5005f19648ccf105a31adc6cb to your computer and use it in GitHub Desktop.
Download ZIP
A trivial web page that can be loaded as file:///window_size_info.html to dynamically display the screen height and width, useful for making a window a specific size for screen grabs etc. without needing to add an extension to ones browser... Has this been Testing'd? In a word. No. It works fine on Firefox & Safari, not tried it with other brows…
Raw
window_size_info.html
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>🖖</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- favicon idea stolen! https://twitter.com/LeaVerou/status/1241619866475474946 -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>">
<style>
html, body {
height: 100vh;
width: 100vw;
margin: 0;
background-color: white;
color: black;
}
.feedback {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
width: 100vw;
}
.icon {
font-size: 15vh;
}
.copy {
margin-left: 5vh;
padding: 0;
font-family: "Hack", monospace;
text-align: center;
font-size: 12vh;
}
.ex {
font-size: 10vh;
margin: 2px;
vertical-align: top;
}
</style>
</head>
<body>
<div class="feedback">
<div class="icon"> 📺 </div>
<div class="copy">
<span id="width">loading...</span><span class="ex">x</span><span id="height">loading...</span>
</div>
</div>
<script>
document.getElementById('width').innerText = window.outerWidth;
document.getElementById('height').innerText = window.outerHeight;
window.addEventListener('resize', () => {
console.log('resized!');
document.getElementById('width').innerText = window.outerWidth;
document.getElementById('height').innerText = window.outerHeight;
}, true);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment