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;
    }
    }
    

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.

那么问题是，当在桌面浏览器中打开内容时，如何设置内容的宽度和高度？

更新： 这是示例。

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;
}