2011-12-26 3 views
2

Я разрабатываю приложение iPhone/iPad с помощью PhoneGap и js/css3 и недавно начал использовать размер экрана большего размера iPad, чтобы внести конкретные корректировки в мой макет. я добавил только iPhone раздел в моем CSS сcss media-запросы не работают при использовании PhoneGap

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

и IPad только раздел с

@media screen and (min-device-width: 481px) {

, и они, казалось, прекрасно работать на моем рабочем столе, когда я отладки (с использованием хром, как в win и mac, так и в сафари на Mac). Когда я построил свое приложение в xCode и запустил его на устройстве, кажется, что все правила внутри этих разделов полностью игнорируются, а мой макет - все неправильно.

Есть ли какой-то трюк, который я должен использовать, чтобы сделать эту работу для меня?

ответ

1

Вы можете попробовать

@media only screen and (-webkit-min-device-width: 481px) { 

для IPad только раздел и вернуться ко мне?

2

Важно, чтобы добавить окно просмотра в голову вашего HTML документа:

<html> 
    <head> 
    ... 
    <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> 
    ... 
    </head> 
    <body> 
    ... 
    </body> 
</html> 

Также смотрите: CSS Media Query Orientation Change not working PhoneGap

Смежные вопросы