Skip to content

Instantly share code, notes, and snippets.

@mklickman
Last active December 11, 2015 15:38
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mklickman/4622360 to your computer and use it in GitHub Desktop.
Save mklickman/4622360 to your computer and use it in GitHub Desktop.
Add this to either the head of your document, or load as an external script, and it will add a small widget to the top left corner of your browser window showing the current width of the viewport. Make sure you load jQuery first.
$(document).ready(function() {
var $counter = $('<p class="viewport-width-counter" />');
$('html').append($counter);
if ($('p.viewport-width-counter').length) {
$counter.css({
'position': 'fixed',
'top': 0,
'left': 0,
'padding': 5,
'border-radius': '0 0 3px 0',
'background': '#999',
'font-family': 'sans-serif',
'margin': 0,
'box-shadow': 'rgba(0, 0, 0, 0.6) 1px 1px 0px',
'color': 'white',
'z-index': 9999
});
var updateViewportWidthCounter = function() {
$counter.text($(window).width());
}
updateViewportWidthCounter();
$(window).on('resize', updateViewportWidthCounter);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment