media query debug

Question

I trying create a responsive site and need see where is page break in my current layout then i think about something that tell me it putting te current window size in each window resize. I see someone telling about responsive layout in this post. A link about the function here. I found this code but cant put to work, now is 01:09, is night here in brazil and im getiing crazy. Someone can help me ? Im testing in chrome. The author tell it put current size in corner of page in em;

<html>
    <head>
        <title>MediaQuery DBG</title>
        <SCRIPT LANGUAGE="JavaScript" SRC="http://code.jquery.com/jquery-1.6.4.js"></SCRIPT>
        <script type="text/javascript">
            $(document).ready(function() {
                var step = 1;
                var start = 1;
                var end = 2048;             
                var unit = "em";
                var command = "";
                var expression = "";
                for (cs=start;cs<=end;cs=cs+step)
                {
                    expression = "screen and (min-device-width: "+(cs-step)+unit") and (max-device-width: "+(cs)+unit")";
                    command = "var mql = window.matchMedia("+expression+");" +
                              "function handleOrientationChange(mql) {" + 
                                "   if (mql.matches) {" + 
                                "       $(\"#lblmq\").replaceWith( \"<div id='lblmq'>tamanho: "+cs+"</div>\" ); " + 
                                "   }" + 
                                "}";
                    command = "mql.addListener("+command+");"
                    eval(command);

                });     
        </script>
        <style>
            #lblmq
            {
                background-color: #789;
                width:20em;
            }
        </style>
    </head>
    <body >
        <div id='lblmq'></div>
    </body>     
</html>

@thirtydot there is hashes because until when i do a ctrl+k html attributes are hidden in stackoverflow. There is really a hashe in $(\"#lblmq\"). Thanks — newway, Oct 02 '11 at 16:32
@Blake it's supposed to put the current window width in em inside div each time window width change but it dont do Nothing. Thanks — newway, Oct 02 '11 at 16:34
someone telling about media query debug with firebug here: http://stackoverflow.com/questions/6840751/how-to-debug-css-inside-different-media-queries-with-firebug-and-chrome-developer — , Oct 14 '11 at 12:17

score 1 · Accepted Answer · edited Dec 15 '11 at 09:38

1

You are a little lost. Perhaps these will help:

edited Dec 15 '11 at 09:38

Cosmin

21,216
5
45
60

answered Oct 11 '11 at 18:35

someone578

26
1

score 1 · Answer 2 · answered Oct 14 '11 at 12:37

1

What you need is here : https://github.com/josscrowcroft/Window-Size-Bookmarklet
It works on firefox only.

answered Oct 14 '11 at 12:37

firefoxonly678

11
1

media query debug

2 Answers2