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: