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!
The post Show browser window size when developing websites appeared first on Dare to Think.
