Question

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

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

我有10张图表可供展示。在Iphone / mobile中将有10张幻灯片（每张幻灯片1张图表）。在Tablet / 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>

由于

Answer 1

我认为修改平台css的方法可以解决问题。尝试计算所需的vh并更新css中的.platform-ipad .chart-box类

Angularjs Ionic - 适用于手机和平板电脑的不同布局

1 个答案: