jquery mobile: установить ширину и высоту для обозревателя рабочего стола

Question

Я использую jquery mobile для эмуляции приложения iphone, и у меня проблема с шириной и высотой содержимого в браузере рабочего стола. Проблема с шириной может быть решена таким образом (ширина = 320 пикселей и центр выравнивания содержимого):

 
    html { background-color: #333; } 
    @media only screen and (min-width: 321px){ 
    .ui-page { 
     width: 320px !important; 
     margin: 0 auto !important; 
     position: relative !important; 
    } 
    } 

Но это создает бесполезный фон под нижним колонтитулом. Я предполагаю, что фон для ui-страницы можно заменить, и можно добавить дополнительный div с фоном для контента (между верхним и нижним колонтитулом), но должен быть лучший способ.

Итак, вопрос в том, как установить ширину и высоту содержимого, когда он открывается в браузере рабочего стола?

Обновление: example.

Answer 1

Вы можете использовать JavaScript, чтобы изменить высоту .ui-страницы при загрузке страницы - вот пример JQuery:

$(document).ready(function(){ 

    if($(window).height() >= 480) 
    { 
     $('.iu-page').height(480); 
    } 

}); 

Answer 2

вы можете попробовать удалить фон элемента страницы и установить его на содержание. Вот пример кода:

CSS

.ui-page.ui-body-c { 
    background: none transparent; 
} 

.ui-content { 
    background: #f0f0f0; 
}