Angularjs離子 - 不同的佈局，移動和平板電腦

我建立使用離子和angularjs和Highcharts的移動應用程序。在大多數頁面中都有用於顯示數據的滑塊。每張幻燈片都有兩個包含highchart的垂直div。Angularjs離子 - 不同的佈局，移動和平板電腦

現在該應用程序的要求是，當它是移動設備（iPhone 4 & 5）打開它應該顯示每張幻燈片一個格，並且當上平板打開總覽它應該顯示每個含滑動highchart兩個垂直的div 。

我有10個圖表顯示。在Iphone /手機中將會有10張幻燈片（每張幻燈片1張圖表）。並在平板電腦/ Ipad將有5張幻燈片（每張幻燈片2張圖）。所有的Highchart數據都是動態的。

我張貼的HTML代碼。至於angularJs，我不確定我應該採取什麼方法？我發佈了兩個設備所需佈局的屏幕截圖圖像鏈接。

的Html

<ion-view> 
    <div ng-controller="chartHomePage"> 
    <ion-content> 
     <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)" > 
     <ion-slide> 
      <div class="card chart-box"> 
      <div class="item item-divider"> 
       Chart 1 
      </div> 
      <div class="item item-text-wrap"> 
       <div ng-controller="ChartController1"> 
       <highchart id="" config="chart1"></highchart> 
       </div> 
      </div> 
      </div> 
      <div class="card chart-box"> 
      <div class="item item-divider"> 
       Chart 2 
      </div> 
      <div class="item item-text-wrap"> 
       <div ng-controller="ChartController2"> 
       <highchart id="" config="chart2"></highchart> 
       </div> 
      </div> 
      </div> 
      <iom-slide> 
     </ion-slide-box> 
    </ion-content> 
    </div><!--end controller div--> 
</ion-view>

感謝

來源

2016-03-18 brunocoder

我倒是覺得沿着修改CSS平臺會做的伎倆線的東西。試計算所需要的VH並在CSS更新.platform-IPAD .chart盒類

來源

2016-03-18 08:49:43 Ladmerc

Angularjs離子 - 不同的佈局，移動和平板電腦

回答

相關問題