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

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

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 *

Current day month ye@r *