0

Ive written some media queries as bellow, but when im trying to test them it seems that they are not working, am i correct in thinking that the media query tests for the screen dimensions rather than the browser dimensions ?

If so how can you test if the media queries are working as im on a laptop 15", connected up to a 22" external display, and the styles i want to test are for screens sub 1300px ie. 13" and bellow 

@media only screen 
and (min-device-width : 500px) 
and (max-device-width : 1300px)  {          

    h1      {font-size:90px; margin-bottom: 60px;}

    h2      {font-size:27px; padding: 0 0 20px 0; }

    p       {font-size:18px; -webkit-font-smoothing: subpixel-antialiased;}

}
sam
  • 9,486
  • 36
  • 109
  • 160
  • http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web – j08691 Mar 15 '13 at 17:12
  • 3
    Media queries watch viewport (browser viewable area) dimension, not screen (monitor) dimension. – isherwood Mar 15 '13 at 17:23

1 Answers1

-3

Media queries don't match screen size -- they match browser size. Just resize the window.

There are tools for this in Firefox and the same things are in Chrome too.

Evan Hahn
  • 12,147
  • 9
  • 41
  • 59
  • 3
    media queries can match both.. max-width: will match the browser, max-device-width: will match the screen – sam Mar 15 '13 at 18:07