How to debug css inside various media queries using Firebug and Chrome Developer tools?

Question

How to debug css for orientation: portrait in Chrome developer tools?

What I am writing inside (orientation:portrait) cannot edit on the fly from the Firebug and Chrome Developer tools. It always shows the usual properties.

 /*normal styles here */ #wrap { width:1024px; } @media only screen and (orientation:portrait){ /* portrait styles here */ #wrap { width:768px; } } 

Answer 1

"The browser or device determines the orientation by listening to the width and height of the window. If the height is greater than the width, the window is in portrait mode. If the width is greater than the height in landscape mode."

Additional information: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Basically, you need to resize your browser window so that the portty css orientation takes effect.

If you open firebug in a browser window, i.e. firebug is at the bottom, the height of the browser window changes, which leads to the fact that the orientation becomes a landscape, and you lose the style of your portrait. For firebug and chrome developer tools, try running the tools in your own window so that your browser size is not affected.

PS. I would use Firebug for such editing, because you can clearly see the change in css when resizing the browser.

Answer 2

More recently (Chrome 17), Chrome DevTools displays a media query context that affects every consistent CSS rule (if present). Although the current implementation does not update styles when changing the rating of media queries (you need to re-select the affected node), http://webkit.org/b/74292 tracks the request to dynamically update the consistent CSS rules.

Answer 3

As stated above, you can resize your browser window so that the height is greater than the width, so the multimedia portrait is true. You can use this url http://robnyman.github.com/matchmedia/ to resize the browser, refresh this page, and you will see if it detects true for the portrait.

Answer 4

Finally, it’s now possible in Firefox 16 responsive mode. Watch a Youtube video here http://www.youtube.com/watch?v=t07cLJhJkjQ