Javascript Angularjs Ionic-手机和平板电脑的不同布局

我正在使用Ionic和angularjs以及Highcharts构建一个移动应用程序。在大多数页面中，都有用于显示数据的滑块。每张幻灯片都有两个包含highchart的垂直div

现在，该应用程序的要求是，当它在移动设备（iPhone4和5）上打开时，每张幻灯片应显示一个div，而在平板电脑（Ipad）上打开时，包含highchart的每张幻灯片应显示两个垂直div

我有10张图表要展示。Iphone/mobile将有10张幻灯片（每张幻灯片1张图表）。平板电脑/Ipad将有5张幻灯片（每张幻灯片2张图表）。 所有海图数据都是动态的

我张贴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>

图1
图2

---

谢谢

我认为修改平台css可以达到这个目的。尝试计算所需的vh并更新css中的.platform ipad.chart box类