我是jQuery Mobile的新手。我正在编写一个移动应用程序，并且希望它可以使data-role="page"所有屏幕上的内容动态适合屏幕大小。有效的方法是什么？我了解了必须在标题中设置的视口。在调整页面的高度和宽度时，它将扮演什么角色？
谢谢。
这是一个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;
}
对页面显示事件以及方向更改/调整大小执行缩放。
$(document).on("pageshow", function(){
ScaleContentToDevice();
});
$(window).on('resize orientationchange', function(){ ScaleContentToDevice() });
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句