我正在使用jQuery Mobile和Phonegap开发移动应用程序。我想将页面分为5部分,并根据屏幕的高度进行响应。
我尝试了这个:
<div data-role="content" style="width:100%; height:100%">
<img src="www/image/1.png" style="width:100%; height:20%">
<img src="www/image/2.png" style="width:100%; height:20%">
<img src="www/image/3.png" style="width:100%; height:20%">
<img src="www/image/4.png" style="width:100%; height:20%">
<img src="www/image/5.png" style="width:100%; height:20%">
</div>
我想要的是:
emaple
谢谢!
最佳答案
在使用jQuery Mobile时,要做的第一件事是调整内容div的大小以填充屏幕。看一下:http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/。
将内容保持在设备屏幕高度的脚本是:
function ScaleContentToDevice(){
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
$(document).on( "pagecontainershow", function(){
ScaleContentToDevice();
});
$(window).on("resize orientationchange", function(){
ScaleContentToDevice();
});
接下来,将5张图片放入内容div中,例如:
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<img src="http://lorempixel.com/800/300/technics/1/" />
<img src="http://lorempixel.com/800/300/technics/2/" />
<img src="http://lorempixel.com/800/300/technics/3/" />
<img src="http://lorempixel.com/800/300/technics/4/" />
<img src="http://lorempixel.com/800/300/technics/5/" />
</div>
</div>
最后使用CSS调整图像大小:
.ui-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
border: 0;
border-image-width: 0;
}
img {
display: block;
width:100%;
height:20%;
padding: 0;
margin: 0;
border: 0;
border-image-width: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
第一条规则从内容div中删除所有填充,边距,边框等。第二个调整图像的大小,因此每个图像占内容div的20%。
这是一个DEMO
如果您决定在页面上包含页眉和/或页脚,这也是可行的,因为缩放代码已将此考虑在内。
DEMO其中包含标题