CSS Media Query min-width ne fonctionne pas correctement

J'ai un code HTML comme:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code: NewYork</title>
    <link rel="stylesheet" href="test.css" />
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

et mon CSS est:

input {
  background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    input {
        background-color: green;
    } 
}

maintenant, le CSS s'applique lorsque la fenêtre est à la 909px largeur. Évidemment pas de barre de défilement problème. Je suis devenir fou avec ce problème plus simple. Je l'ai testé avec Chrome et IE10 fois la même.

Quelqu'un peut s'il vous plaît aider ce que je fais de mal ici?

OriginalL'auteur Tuan | 2013-05-21