Мобильный медиа-запрос не работает

Question

Хорошо, я в полной растерянности. Я искал в Интернете решение, и кажется, что единственное, что работает для людей, это метатег:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Проблема в том, что у меня уже есть это в моем заголовке на всех страницах. Медиа-запросы прекрасно работают на моей странице index.php, но когда я оформляю другие мои страницы, все работает, кроме мобильных. То есть стили планшета и рабочего стола просто отлично. У меня есть стандарт

/*----Mobile Styling----*/

@media only screen and (min-width: 768px) {

/*----Tablet Styling----*/

}

@media only screen and (min-width: 1000px) {

/*----Desktop Styling----*/

}

Я в полной растерянности, все мои скобки закрыты, и мой CSS выглядит нормально. Что-нибудь еще может быть?

Answer 1

Напишите ваши медиа запросы, как это. и поместите ваши медиа-запросы в конце вашего основного CSS.
например. если размер шрифта для настольного компьютера составляет 14 пикселей, а для мобильного - 10 пикселей. чем в вашей CSS, когда вы пишете 14px должен стоять первым, а затем в медиа-запросах для мобильной записи 10px. Несоответствие в заказе может быть проблемой в вашем коде.

@media(min-width:320px) and (max-width:479px) {
//Mobile Portrait
}

@media(min-width:480px) and (max-width:767px) {
//Mobile Landscape
}

@media(min-width:768px) and (max-width:991px) {
//Tablet Portrait
}

@media(min-width:992px) and (max-width:1199px) {
//Tablet Landscape
}

@media(min-width:1200px) and (max-width:1600px) {
//Desktop and bigger devices
}

Answer 2

Зависит от того, какой браузер вы используете на своем смартфоне. Если вы используете only, он заблокирует все старые браузеры со смартфонов. Так что в этом случае попробуйте использовать:

@media (min-width: 768px) {

/*----Tablet Styling----*/

}

@media (min-width: 1000px) {

/*----Desktop Styling----*/

}