我正在使用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其中包含标题

09-11 19:50
查看更多