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

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

1 个答案: