Мета-тег области просмотра и медиа-запросы css

У меня проблема с использованием медиа-запросов CSS вместе с метатегом области просмотра. Я делаю веб-приложение для iPad, которое будет работать в автономном режиме на главном экране.

Это CSS:

.header_portrait {

    position: relative;
    top: 0px;
    left: 0px;
    background: #ccc;
    width: 1536px;
    height: 219px;

}

.header_landscape {

    position: relative;
    top: 0px;
    left: 0px;
    background: #fff;
    width: 1536px;
    height: 219px;

}

@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .header_landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .header_portrait { display: none; }
}

Это часть HTML <head>:

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" />
<meta name="apple-mobile-web-app-capable" content="yes">

Это часть HTML <body>:

<div class="header_portrait" ontouchmove="togle_touch('disable');">

</div>
<div class="header_landscape" ontouchmove="togle_touch('disable');">

</div>

Если я удалю метатег видового экрана из определения ориентации головы, все будет нормально. Кажется, что область просмотра испортила max-device-width, так что медиа-запрос CSS не обнаруживает ее должным образом.

Любая помощь приветствуется :)


html ipad css safari viewport
person Develoger    schedule 21.11.2012    source источник
comment
В качестве отступления следует ли user-scaleable = 0 не быть user-scaleable = no? Возможно, оба работают, но я всегда использовал user-scaleable = no.   -  person Billy Moat    schedule 21.11.2012
comment
Это не помогает, также вы можете использовать как 0, так и нет для масштабируемого пользователем   -  person Develoger    schedule 21.11.2012

Ответы (1)


arrow_upward
0
arrow_downward

(Ответы в комментариях или правках. См. вопрос с ответов нет, но вопрос решен в комментариях (или расширен в чате))

ОП написала:

Я решил это!

Просто замените:

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" />

С участием:

<meta name="viewport" content="width=device-width, maximum-scale=0.5" />

Пока он работает хорошо, и в iPad 3 я должен протестировать его на iPad 1 и 2 ...

person Community    schedule 26.01.2015