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

但这会导致页脚下无用的背景。 我猜ui-page的背景可以替换，并且可以为内容添加额外的div（在页眉和页脚之间），但应该有更好的方法。

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

更新： 这是example。

Answer 1

您可以使用javascript在页面加载时调整.ui-page的高度 - 这是一个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;
}