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

Question

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

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

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

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

Обновление: Вот пример .

Answer 1

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

CSS

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

.ui-content {
  background: #f0f0f0;
}

Answer 2

Вы можете использовать javascript для изменения высоты .ui-страницы при загрузке страницы - вот пример jQuery:

$(document).ready(function(){

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

});