Current screen width indicator

Super handy snippet to include in your site while developing responsive websites. It is a screen width indicator that is very helpful for knowing when to add breakpoints to your CSS file.

Add this little snippet of jQuery to your scripts file or in footer of your site. It calculates the width of the current window size and outputs the value.


<script>
$(window).resize(function() {
	var windowWidth = $(window).width();
	$('.screen-width').text(windowWidth + 'px');
});
</script>

Add this to your HTML file/s.


<div id="debug"

  style="
   position:fixed;
   padding:0.3em 0.6em;
   background:#f1f1f1;
   font-size:0.6em;
   bottom:0;
   left:50%;
  ">

 <span class="screen-width">0</span>

</div>

The above code will output a little indicator fixed at the bottom of your page like this:

Reference – GitHub Gist

2 Comments

  1. Useful little snippet thanks!

  2. This is bit better piece, becaus when page loads you already see the width:

    $( document ).ready(function() {
    $(‘.screen-width’).text($(window).width() + ‘px’);
    });
    $(window).resize(function() {
    var windowWidth = $(window).width();
    $(‘.screen-width’).text(windowWidth + ‘px’);
    });

This post currently has 2 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *