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

Question

我正在建设一个移动应用程序/网站（在Ionic 3.25中），并希望支持桌面Web浏览器体验，而不会浪费所有屏幕空间。我偶然发现了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中，但屏幕上没有任何内容。

这种行为远离文档，我必须有一些错误，但我不确定是什么。任何人都知道如何让这个小组工作？

Answer 1

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

将侧边菜单项目转换为使用Ion-Split-Pane时，内容部分需要将 main 关键字添加到<ion-nav>对象。

修订后的代码：

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

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