我是 jquery mobile 新手。我正在编写一个移动应用程序,我希望它能够动态适应 data-role="page"
的内容
适合所有设备上的屏幕尺寸。
有效的方法是什么?
我读到有关必须在 header 中设置的视口(viewport)的信息。在调整页面的高度和宽度时它起什么作用?
谢谢。
最佳答案
这是一个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() });
关于jquery - 根据设备动态分配jquery移动页面高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19591991/