基于设备动态分配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() });