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

});