Zapytania medialne nie działają na urządzeniach mobilnych

Podobne pytania zostały zadane wcześniej, ale po przeczytaniu ich nie znalazłem jeszcze odpowiedzi, która działa z moją stroną.

Zbudowałem stronę wokół Bootstrap, ale dodałem kilka własnych zapytań o media. Strona testowa na żywo znajduje się pod adresem:http://agoodman.com.au

Sekcje zmieniane przez zapytania o media to „nasze opłaty” i nakładka „mapa”. Jeśli korzystasz z laptopa, zmiana rozmiaru przeglądarki powoduje, że te sekcje są wyświetlane jako bloki.

Moje linki arkusza stylów:

    <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” to po prostu oddzielny plik, ponieważ chciałem móc zachować i zaktualizować główny szkielet bootstrap, jeśli to konieczne. User.css zastępuje style w bootstrapie. Moje zapytania o media w user.css są następujące:

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

Jak już powiedziałem, na przeglądarkach komputerowych działa to dobrze, ale w przeglądarkach mobilnych nie działa wcale. Przetestowałem zarówno na telefonie iPhone 4 (za pomocą safari), jak i na HTC Desire (za pomocą podstawowej przeglądarki Android) i oba wyświetlają się w ten sam sposób - ignorując zapytanie o media i wyświetlając pełną stronę z dużą ilością naprawdę spłaszczonych i niepochlebnych treści .

Jakieś pomysły na to, co robię źle tutaj?

EDYTOWAĆ:

Oto zrzuty ekranu tego, co to jestPOWINIEN wyglądać jak przy małej szerokości ekranu:

A jak obecnie wygląda na Androidzie i iPhonie, gdzie urządzenie ignoruje moje zapytania o media:

questionAnswers(2)

yourAnswerToTheQuestion