移动主页解决方案

Question

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

例如： <>
| ICON 1 | ICON 2 |
| ICON 3 | ICON 4 |
| ICON 5 | ICON 6 |
<>

我看到了很多的例子，但是当我在phonegap中运行应用程序所需的时间少于全屏。

Answer 1

您可以使用JQM电网有2列3行：

<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％的高度工作，你需要缩放内容股利设备，请参阅这篇文章：http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

工作DEMO