基于设备为jquery移动页面动态分配高度

Question

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

谢谢。

Answer 1

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

在 Ved 提到的元视口之后，使用 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() });