Responsive Web Design Viewport Width Display

If you look down to the bottom left of the window, you'll see a sticky tag that's reporting exactly how wide your viewport is according to CSS and JS. And a handy little icon suggesting what size device this might be equivalent to (for people like me with massive screens).

This is actually a part of my Responsive Web Design framework, but it's also a handy stand-alone. It synchronises a little better with my framework because the icon changes and my frameworks breakpoints are set to match.

Depending on what you're using to view this page, you might notice the CSS and JS are reporting different widths. This is usually the width of a scroll bar and can be a proper pain in the ass if you're not expecting it because JS/JQ events will fire out of sync with CSS. This can easily be solved by using JS to add a class which then applies the CSS.

The CSS file that comes in this download is pretty weighty so you'll want to remove it before going live. There's basically a media query for every pixel width 200px and 2,000px.


How to use it?

Download, unzip and place the mohunky-rwd-width-display folder in your root directory.

DOWNLOAD

Then link in the CSS file:

<link href="/mohunky-rwd-width-display/screen-width.css" rel="stylesheet" type="text/css">
<!-- remove this when you've finished developing the website -->

Then place the counter somewhere on page, I usually put it right after <body> so it stands out and I remember to move it;

<!-- RWD Viewport Width Display -->
	<!-- remove this when you've finished developing the website -->
	<script type="text/javascript">
		function responsiveFn() {
		     width = $( window ).width();
		      
		  // Executing Both width() and height()   
		  document.getElementById('jqwidth').innerHTML=width; 
		 }
		  // load() event and resize() event are combined 
		   $(window).ready(responsiveFn).resize(responsiveFn); 
	</script>
	<div id="WidthReport">
		<p>
			<span class="device"></span>
			CSS:&nbsp;<span id="csswidth"></span>px
			<br>
			JQ:&nbsp;<span id="jqwidth"></span>px
		</p>
	</div>
<!-- End RWD Viewport Width Display -->
				

And that's it! Have fun, let me know if you find it useful or have feedback.

CSS: px
JQ: px