Ion-Split-Pane 无法扩展到移动设备答案

【问题标题】：Ion-Split-Pane doesn't scale to mobileIon-Split-Pane 无法扩展到移动设备
【发布时间】：2018-06-08 02:41:59
【问题描述】：

我有一个正在构建的移动应用程序/网站（在 Ionic 3.25 中），并希望在不浪费所有屏幕空间的情况下支持桌面网络浏览器体验。我偶然发现了 Ion-Split-Pane。从文档中看起来很完美，当使用大屏幕时，我可以将侧边菜单作为完整菜单弹出。我按照 app.html 文件中的建议设置代码：

<ion-split-pane when="md">
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
          <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
            {{p.title}}
          </button>
        </ion-list>
      </ion-content>
  </ion-menu>
  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>

我在使用 Ionic Serve 时遇到的行为令人费解。当我使用大屏幕（大约 922 像素宽）时，我会获得三窗格体验，其中最右侧有一堆空白，其中没有任何内容。这令人惊讶，因为我认为应用程序会使用可用空间：

当我缩小到该大小以下时，整个网站/应用程序就会消失。元素仍在 html 中，但没有任何内容被绘制到屏幕上。

这种行为与文档相差甚远，我一定有什么问题，但我不确定是什么。有谁知道我怎样才能让这个面板工作？

【问题讨论】：

标签： ionic-framework responsive-design ionic3

【解决方案1】：

在研究了一段时间后，我发现了我的问题。文档中没有明确提到它，所以我会在这里发布答案，以防其他人遇到它。

将侧菜单项目转换为使用 Ion-Split-Pane 时，内容部分需要将 main 关键字添加到 <ion-nav> 对象。 #content 和 [root] 是不够的。

修改后的代码：

<ion-split-pane when="md">
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
          <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
            {{p.title}}
          </button>
        </ion-list>
      </ion-content>
  </ion-menu>
  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
  <ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>

如果没有该行，整个应用程序将被扔到“菜单”窗格中，并在转到移动视图时消失。

【讨论】：