Устройства, не читающие мобильные условные операторы в CSS

Question

Я создаю адаптивный макет, который отлично работает на большинстве форматов, кроме смартфонов с шириной 320 пикселей. Я использовал мультимедийные условия как в CSS, так и в отдельной таблице стилей, и ни один из них, похоже, не работает, почти как если бы устройство игнорировало условный код.

Мой оригинальный CSS выглядит так (для устройств 480px и выше):

#logo
{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 117px;
background-image:url(../images/logorepeat.png);
background-position:0px 26px;
background-repeat:repeat-x;
z-index:50;
}

#landscape
{
position:relative;
margin-top:-27px;
margin-left:auto;
margin-right:auto;
padding-top:45px;
text-align:center;
width:100%;
height:120px;
background-image:url(../images/plated2.jpg);
background-repeat:repeat-x;
background-color:#efebe5;
z-index:40;
}

Поскольку мне не нужен повторяющийся фон в устройствах с разрешением 320px (например, iPod Touch), я удалил его в этом вызове для устройства (а также переместил div над ним вверх):

@media screen and (max-width: 320px)
{

#logo
{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 117px;
z-index:50;
}

#landscape
{
position:relative;
margin-top:-45px;
margin-left:auto;
margin-right:auto;
padding-top:45px;
text-align:center;
width:100%;
height:120px;
background-image:url(../images/plated2.jpg);
background-repeat:repeat-x;
background-color:#efebe5;
z-index:40;
}

}

Какие-либо предложения?

Спасибо!:)

Answer 1

Я ответил на свой вопрос! Я просто поместил таблицу стилей iphone, которую я сделал, в качестве таблицы по умолчанию и связал ее с таблицами стилей медиазапроса в заголовке моего HTML в порядке убывания.:)