Ähnliche Fragen wurden hier bereits gestellt, aber nachdem ich sie gelesen habe, habe ich noch keine Antwort gefunden, die mit meiner Site funktioniert.

Ich habe die Site um Bootstrap erstellt, aber einige meiner eigenen Medienabfragen hinzugefügt. Die Live-Testseite befindet sich unter:http://agoodman.com.au

Die Abschnitte, die durch die Medienanfragen geändert werden, sind "unsere Gebühren" und das "Karten" -Overlay. Wenn Sie sich auf einem Laptop befinden, werden diese Abschnitte durch Ändern der Browsergröße als Blöcke angezeigt.

Meine Stylesheet-Links:

    <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">

"User.css" ist nur eine separate Datei, da ich in der Lage sein wollte, das Hauptframework von Bootstrap bei Bedarf zu behalten und zu aktualisieren. User.css überschreibt die Stile in Bootstrap. Meine Medienabfragen in user.css lauten wie folgt:

@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;
    }
}

Wie gesagt, auf Desktop-Browsern funktioniert dies problemlos, auf mobilen Browsern jedoch überhaupt nicht. Ich habe sowohl auf einem iPhone 4 (mit Safari) als auch auf einem HTC Desire (mit dem Standard-Android-Browser) getestet und beide auf die gleiche Weise angezeigt. Dabei habe ich die Medienabfrage ignoriert und nur die vollständige Website mit vielen wirklich kleinen und schmeichelhaften Inhalten angezeigt .

Irgendwelche Ideen, was ich hier falsch mache?

BEARBEITEN:

Hier sind Screenshots von dem, was es istSOLLTE siehst aus wie bei einer kleinen Bildschirmbreite:

Und wie es derzeit auf Android und iPhone aussieht, wo das Gerät meine Medienabfragen ignoriert: