jQuery mobile：为桌面浏览器设置宽度和高度

Question

I'm using jquery mobile for emulating iphone application and i have a problem with content width and height at desktop browser. Problem with width can be solved that way (width = 320px and content align center):

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

But this causes useless background under footer. I guess that background for ui-page can be replaced and one can add extra div with background for content (between header and footer), but there should be better way.

So the question is how to set width and height for content, when it is opened in desktop browser?

Update: Here is example .

Answer 1

you can try to remove the background of the page element and set it at the content. here is an example code:

CSS

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

.ui-content {
  background: #f0f0f0;
}

Answer 2

You could use javascript to resize the .ui-page's height on page load - here's a jQuery example:

$(document).ready(function(){

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

});