@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