Skip to content

Instantly share code, notes, and snippets.

@ricardozea
Last active February 24, 2019 07:03
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 ricardozea/1f0eae232ef28ae5788dbdfd4f0077ec to your computer and use it in GitHub Desktop.
Save ricardozea/1f0eae232ef28ae5788dbdfd4f0077ec to your computer and use it in GitHub Desktop.
This script creates a small red box at the bottom left with the viewport dimensions.
/*
Script to display the viewport size when working on responsive stuff.
Adpted to vanilla JS by: Taylor Hunt - https://codepen.io/tigt/
*/
var el = document.createElement("output");
document.body.append(el);
Object.assign(el.style, {
position: "fixed",
bottom: 0,
left: 0,
background: "red",
color: "white",
padding: "5px",
fontSize: "11px",
opacity: 0.7
});
function updateOutput() {
var html = document.documentElement;
el.value = html.clientWidth + " × " + html.clientHeight;
}
window.addEventListener("resize", updateOutput);
updateOutput();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment