iOS app looks wrong

Hi,

I’m trying to create an app using ionic (latest) and angular (latest).
My app is really simple but looks way different in browser then on my iphone 16pm.

ng serve

iphone screenshot

The button is not a button and not clickable.
The header is not in the right place.

<ion-header>
  <ion-toolbar>
    <ion-title>App</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <strong>Ready to create an app?</strong>
  <ion-button id="exercise-select-modal" expand="block">Open</ion-button>
  <app-exercise-select-modal trigger="exercise-select-modal"></app-exercise-select-modal>

  <a [routerLink]="'/exercises'">Test</a>
</ion-content>

import { Component } from '@angular/core';
import {IonicModule} from "@ionic/angular";
import {ExerciseSelectModalComponent} from "../modals/exercise-select-modal/exercise-select-modal.component";
import {RouterLink} from "@angular/router";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonicModule, ExerciseSelectModalComponent, ExerciseSelectModalComponent, RouterLink],
})
export class HomePage {
  constructor() {}
}

Can someone please help me out?

1 post - 1 participant

Read full topic