基於設備動態分配jquery移動頁面的高度

Question

我是jquery mobile的新手。我正在編寫一個移動應用程序，我希望它能夠動態地將所有設備上的屏幕尺寸設置爲data-role="page" 的內容。 做什麼是有效的方法？ 我讀過關於必須在標題中設置的視口。它在調整頁面的高度和寬度時起什麼作用？

謝謝。

Answer 1

這裏是一個的jsfiddle：http://jsfiddle.net/ezanker/Tx4kF/

由韋達提到的中繼檢視後，使用JavaScript來計算可用高度爲內容窗格：

function ScaleContentToDevice() { 
    scroll(0, 0); 
    var headerHeight = $("#jqmHeader:visible").outerHeight(); 
    var footerHeight = $("#jqmFooter:visible").outerHeight(); 
    var viewportHeight = $(window).height(); 

    var content = $("#jqmContent:visible"); 
    var contentMargins = content.outerHeight() - content.height(); 

    var contentheight = viewportHeight - headerHeight - footerHeight - contentMargins; 

    content.height(contentheight); 
} 

這裏假設你有沒有保證金或填充body/html：

html, body { 
    margin: 0; 
    padding : 0; 
} 

對pageshow事件執行縮放，如下所示：以及定位更改/調整大小。

$(document).on("pageshow", function(){ 
    ScaleContentToDevice(); 
}); 
$(window).on('resize orientationchange', function(){ ScaleContentToDevice() });