Show browser window size when developing websites

It’s often useful to view the size of your browser window when developing websites, so you can add media queries where required. Add the following code below the opening body tag

<!-- START Code to show window size -->
<script type="text/javascript">
    function jqUpdateSize(){
        // Get the dimensions of the viewport
        var width = $(window).width();
        var height = $(window).height();
    
        $('#jqWidth').html(width);
        $('#jqHeight').html(height);
    };
    $(document).ready(jqUpdateSize); // When the page first loads
    $(window).resize(jqUpdateSize); // When the browser changes size
</script>

<div style="position: fixed; top: 0; left: 0; color: #000;background-color: #fff;padding: 0 3px ;z-index: 9999999999;">
<p style="float: left; font-size: 10px;">
    <span id="jqWidth">0</span><br />
    <span id="jqHeight">0</span>
</p>
</div><!-- END Code to show window size -->

Obviously remember to remove when the site goes live!