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页面的背景，并且可以为内容添加额外的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);
    }

});