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

我是jquery mobile的新手。我正在编写一个移动应用程序，我希望它能够动态地适应

data role=“page”

设置所有设备上的屏幕大小。 做这件事的有效方法是什么？ 我读过关于必须在标题中设置的视口的内容。它在调整页面的高度和宽度时扮演什么角色

---

谢谢。

这是一个jsFiddle:

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

这假定正文/html上没有边距或填充：

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

在pageshow事件上执行缩放以及方向更改/调整大小

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

---

添加标题标签并阅读此链接1）视口描述中说，在标题中设置视口将自动处理高度和宽度。但它不起作用。那么它的实际意义是什么呢？meta标记不处理设置HTML元素高度以填充屏幕，而是帮助确定页面在移动设备上的外观：是缩小以适应，还是仅部分可见，等等。有关更多信息，请参阅。我的回答是假设你试图让content div精确地填充页面的可用高度，也许这不是你想要的…它对我来说非常有效。但这在iPad上不起作用。如果我在这种情况下更改方向，它将显示放大的页面，并且不适合该页面。您是否可以查看方向更改事件是否正在触发？parhaps添加警报以调试是否触发以及屏幕大小的值…事件被触发。在安卓设备上，缩放效果非常好，上面的问题仅限于iOs。