Angularjs Ionic - 移动设备和平板电脑的不同布局

Posted 2023-05-07

【中文标题】Angularjs Ionic - 移动设备和平板电脑的不同布局

【英文标题】：Angularjs Ionic - Different layouts for mobile and tablets

【发布时间】：2016-07-04 14:47:54

【问题描述】：

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

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

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

我正在发布 html 代码。至于 angularJs 我不确定我应该采取什么方法？我已经发布了两种设备所需布局的屏幕截图的图片链接。

screenshot for Ipad/tablets

screenshot for Iphone/Mobile device

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】：

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