如何使用angular和ionic框架在移动设备中打开半个屏幕的浏览器

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HalfScreenPage } from './half-screen/half-screen.page';

const routes: Routes = [
  {
    path: 'half-screen',
    component: HalfScreenPage
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HalfScreenPage } from './half-screen/half-screen.page';

@NgModule({
  declarations: [AppComponent, HalfScreenPage],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

<ion-header>
  <ion-toolbar>
    <ion-title>
      Half Screen
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <iframe src="https://example.com" width="50%" height="100%"></iframe>
</ion-content>

iframe {
  border: none;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-half-screen',
  templateUrl: './half-screen.page.html',
  styleUrls: ['./half-screen.page.scss'],
})
export class HalfScreenPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<ion-header>
  <ion-toolbar>
    <ion-title>
      My App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button expand="full" (click)="openHalfScreen()">Open Half Screen</ion-button>
</ion-content>

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  constructor(private router: Router) {}

  openHalfScreen() {
    this.router.navigateByUrl('/half-screen');
  }
}