How to debug css inside different media queries with Firebug and Chrome Developer tools?

问题

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

What ever I write inside (orientation:portrait) can't edit on the fly from Firebug and Chrome Developer tools. It always shows the normal Properties.

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

回答1:

"A browser or device determines the orientation by listening to the width and height of the window. If the height is larger than the width the window is in portrait mode. If the width is larger than the height it’s in landscape mode."

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

Basically you need to resize your browser window for the portait orientation css to take effect.

If you open firebug within the browser window ie. firebug is at the bottom, the height of the browser window changes, causing the orientation to become landscape, thus you are losing your portrait styles. For both firebug and chrome developer tools, try launching the tools in their own window so your browser size is not affected.

PS. I would use Firebug for this kind of editing because you can clearly see the css changing as you resize the browser.

回答2:

Since recently (Chrome 17), Chrome DevTools display the media query context affecting every matched CSS rule (if present). While the current implementation does not update the styles on media query evaluation changes (you need to re-select the affected node), http://webkit.org/b/74292 tracks the request to dynamically update the matched CSS rules.

回答3:

As they say above you can resize your browser window to have the height be larger than the width so then the media portrait is true. You can use this url http://robnyman.github.com/matchmedia/ so resize the browser, refresh that page and you will see if is detecting true for portrait.