@media screen css property doesn't respond?

Question

My @media screen and (max-device-width: 640px) doesn't seem to respond. I also put the

<link rel="stylesheet" type="text/css" href="css/mobile.css"/>

and the

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

in my Index.html.

I only have this in my mobile.css:

 @media screen and (max-device-width: 640px)
 {
 #navbar {
     height: 11%;   
     }
 }

What do I miss? I work btw in dreamweaver cs4.

Answer 1

max-device-width and/or min-device-width needs an actual device to take effect, to debug your code on desktop you need to use:

@media screen and (max-width: 640px) {

  #navbar {
    height: 11%;    
  }

}

Answer 2

Try Device Emulator in Chrome Browser ,

if you develop for mobile devices, but don't have one to test on, It provides presets of existing devices (iPhone, HTC, Google...) and allows to edit resolution, orientation etc.

Answer 3

i'm think this...

 #navbar {
     height: 11%;   
     max-height:11%;
     }

so it never going to revase the max height