jquery - 根据设备动态分配jquery移动页面高度

Question

我是 jquery mobile 新手。我正在编写一个移动应用程序，我希望它能够动态适应 data-role="page" 的内容适合所有设备上的屏幕尺寸。有效的方法是什么？我读到有关必须在 header 中设置的视口(viewport)的信息。在调整页面的高度和宽度时它起什么作用？

谢谢。

Answer 1

这是一个jsFiddle: http://jsfiddle.net/ezanker/Tx4kF/

在Ved提到的元视口(viewport)之后，使用javascript计算内容 Pane 的可用高度:

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