Question

如果我想在移动设备和平板电脑视图上使用jQuery Mobile全屏显示6个图标（无论视口是什么），最佳方法是什么？

我看到了很多例子，但是当我在phonegap中运行应用程序时，只需要全屏显示。

Answer 1

您可以使用包含2列和3行的jQM网格：

    <div class="ui-grid-a">
        <div class="ui-block-a"><img src="http://lorempixel.com/256/256/sports/1/" /></div>
        <div class="ui-block-b"><img src="http://lorempixel.com/256/256/sports/2/" /></div>
        <div class="ui-block-a"><img src="http://lorempixel.com/256/256/sports/3/" /></div>
        <div class="ui-block-b"><img src="http://lorempixel.com/256/256/sports/4/" /></div>
        <div class="ui-block-a"><img src="http://lorempixel.com/256/256/sports/5/" /></div>
        <div class="ui-block-b"><img src="http://lorempixel.com/256/256/sports/6/" /></div>
    </div>

在CSS中，确保网格设置为100％高度，每个行单元格设置为33.3％高度。

.ui-grid-a {
    height: 100%
}
.ui-block-a, .ui-block-b {
    height: 33.3%;
    padding: 4px;
}
.ui-block-a img, .ui-block-b img {
    height: 100%;
    width: 100%;

}

要使100％的高度有效，您需要将内容div缩放到设备，请参阅此文章：http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

正在使用 DEMO

移动主页的解决方案

1 个答案: