Les Media queries ne fonctionne pas sur mobile

Questions similaires ont été posées ici avant, mais après la lecture grâce à eux, je n'ai pas encore trouvé une réponse qui fonctionne avec mon site.

J'ai construit le site autour de "Bootstrap", mais a ajouté que certains de mes propres requêtes de média. Live site de test est: http://agoodman.com.au

Les articles modifiés par les media queries sont "nos frais" et la "carte" de superposition. Si vous êtes sur un ordinateur portable, le redimensionnement du navigateur qui rend ces sections de l'affichage sous forme de blocs.

Ma feuille de style pour les liens:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">

"De l'utilisateur.css" est juste un fichier séparé parce que je voulais être en mesure de maintenir et mettre à jour des fichiers d'amorce du cadre principal en tant que de besoin. De l'utilisateur.css remplace les styles dans le bootstrap. Mes médias requêtes de l'utilisateur.les css sont comme suit:

@media screen or handheld(max-width: 979px) {
    .fee-buttons {
        height: auto;
        font-weight: 600;
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
        }

    .fee-buttons .transformation {
        width: 100% !important;
        height: 300px;
        position: relative;
        z-index: 10;
        left:0;
        }

    .fee-buttons .hourly, .fee-buttons .membership {
    float: none;
    width: 100% !important;
    }

    li.button{
    overflow:visible;
    }

}

@media screen or handheld(max-width: 995px) {
    #overlay {
        position: relative;
        display: block;
        width: auto;
        right: 0;
        padding:1em;
    }
}

Comme je l'ai dit, sur les navigateurs de bureau, cela fonctionne bien, mais sur les navigateurs mobiles, il ne fonctionne pas à tous. J'ai testé les deux sur un iPhone 4 (à l'aide de safari) et sur un HTC Desire (en utilisant le stock android navigateur) et les deux affichent de la même manière - en ignorant la requête de média et de simplement afficher le site web complet avec beaucoup de vraiment écrasé et peu flatteuse de contenu.

Toutes les idées sur ce que je fais mal?

EDIT:

Voici des captures d'écran de ce que c'est DEVRAIT ressembler à une petite largeur de l'écran:

Et à quoi il ressemble actuellement sur Android et iPhone, où le dispositif est ignorant mes requêtes de média:

OriginalL'auteur JVG | 2012-07-25