Screen Ruler demo

Whenever I build a responsive website I fine-tune the design while checking it out at as many different screen sizes as possible. This shows me where the design starts to break apart. I will usually setup the website to use various breakpoints, or points where the design will adapt to different screen sizes. If the design breaks apart, I will alter my style sheet declarations inside the appropriate media query to fix it.

If the design needs help when the screen is 880px wide, I will look for the media query in the style sheet that will cover the 880px size.

I use firebug extensively to look at the source code while I'm building a website.  It helps me see what html, css, and javascripts that are active on any given page.

What if you just want to see how big the window is?

There are a number of ways to do this.

One way is to use css to append text to a div that shows which width range (that you defined in your media queries) is active.

Another way, and the method we'll focus on, is to use jQuery to show exactly how wide and tall the window is.  I saw this active on http://quirktools.com/screenfly

Implementation

First thing is to make sure that jQuery is included either in the head of the document or just before the closing </body> tag.

like:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

Secondly, create a div with an id of ruler like:

<div id="ruler"></div>

After you include jQuery,

include the following script tag:

<script type="text/javascript">
    function screenRulers() {
    $("#ruler").text($(window).width() + "px wide x " + $(window).height() + "px tall")
    };
    
    $(document).ready(function () {
        screenRulers()
        $(window).resize(function () {
            screenRulers()
    });
});
</script>

This will show the width and height of window after you resize the window.  It will look like the image below:

responsive screensize helper

Go ahead and test it out.  Pretty cool right?

I use this trick while developing sites and then remove the script and the div before the site goes from development to production.

Add Your Comment

Comments powered by LudwigDisqus for ModX


Get Growth

Grow your Shop's Revenues

Curious? See Past Issues

Bike Shop SEO

443 Lincoln Circle
Louisville, CO 80027
Bike Shop SEO © 2018 | Sitemap