jquery mobile：爲桌面瀏覽器設置寬度和高度

我正在使用jquery mobile來模擬iphone應用程序，並且在桌面瀏覽器中我有一個內容寬度和高度的問題。寬度問題可以通過這種方式解決（寬度= 320px和內容對齊中心）： jquery mobile：爲桌面瀏覽器設置寬度和高度

 
    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。

來源

2012-02-03 idobr

你可以使用JavaScript來調整在頁面載入的.ui頁的高度 - 這裏有一個jQuery的例子：

$(document).ready(function(){ 

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

});

來源

2012-02-03 17:44:21 nerdburn

謝謝你的答案。它不能解決問題。在我看來，條件有效，表達不。 [鏈接]（http://jsfiddle.net/9Tpwc/6/embedded/result/） – idobr 2012-02-03 19:30:30

+我更喜歡一些css解決方法，比如「max-width：320px」，如果有的話。 – idobr 2012-02-03 19:38:06

你可以嘗試刪除頁面元素的背景，並在內容設置。這裏有一個例子代碼：

CSS

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

.ui-content { 
    background: #f0f0f0; 
}

來源

2016-11-11 23:20:42

jquery mobile：爲桌面瀏覽器設置寬度和高度

回答

相關問題