Медиа-запросы не работают на мобильных устройствах
Подобные вопросы задавались здесь ранее, но после их прочтения я еще не нашел ответа, который работает с моим сайтом.
Я построил сайт на Bootstrap, но добавил несколько моих собственных медиа-запросов. Живой тестовый сайт находится по адресу:http://agoodman.com.au
Разделы, изменяемые медиа-запросами, - это «наши сборы». и «карта»; наложение. Если вы используете ноутбук, при изменении размера браузера эти разделы отображаются как блоки.
Мои ссылки на таблицы стилей:
<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">
& Quot; user.css & Quot; это просто отдельный файл, потому что я хотел иметь возможность сохранять и обновлять основную среду начальной загрузки по мере необходимости. User.css переопределяет стили в начальной загрузке. Мои медиа-запросы в user.css следующие:
@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;
}
}
Как я уже сказал, в настольных браузерах это работает нормально, но в мобильных браузерах это вообще не работает. Я тестировал как на iPhone 4 (с помощью Safari), так и на HTC Desire (с помощью стандартного браузера Android) и отображал их одинаково - игнорируя медиазапрос и просто отображая весь веб-сайт с большим количеством действительно сжатого и нелестного контента. ,
Есть идеи о том, что я здесь делаю неправильно?
РЕДАКТИРОВАТЬ:
Вот скриншоты того, что этоSHOULD