Медиа-запросы не поддерживаются в разрешении системы 1024x768

Question

Я применил цвет фона: серый для планшета и синий цвет для моего системного браузера с использованием медиа-запросов css. Работает нормально. Теперь проблема в том, что когда я установил разрешение системы на 1024x768, цвет планшета - серый также применяется к моему системному браузеру, а не синий. Пожалуйста, предложите мне.

Ниже мой css:

.Box{background-color:#709bd3;height:200px}

@media screen and (min-device-width:600px) and (max-device-width:1024px) {
.Box{background-color:#ccc}
}

Answer 1

Для начала убедитесь, что вы ставите точку с запятой в конце каждого оператора.

.Box {
background-color:#709bd3;
height:200px;
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    .Box {
    background-color:#ccc;
    }
}

Я также изменил min-device-width на 768px, что является минимумом для iPad.

EDIT - похоже, вам нужно будет использовать строку агента пользователя.Попробуйте сделать следующее:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3888106/How-Can-I-Detect-the-iPhone--iPads-User-Agent.htm