移動主頁解決方案

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