I have an Ionic app that I am working on. I have an Android device that I can test it on, but I do not have any Apple device to test my app with. Is there any way I can display my app in a web browser, but have it use the iOS styling?

I have tried work arounds and searched for other solutions, but came up empty. The closest thing was for me to try using Safari to test it and hope that it would apply the iOS styles with that, but the only way to get Safari on Windows is downloading an old, out-dated version. And that version doesn't support arrow functions, and so my app doesn't work, since Angular's styles.js and many other files use them.

CodePudding user response：

In case the purpose is to see the design and navigation of app how it will be here are the below two steps:

First,in modern browsers, if right click on the page, then click inspect.

At this point you can insert CTRL SHIFT M so it will open dev tools bar at the to top of the browser in-screen, so you can choose the device you need to display like android or ios then refresh the page to make sure all the designs get loaded properly as per the selected device type..

Another way which could be more efficient if you don't wanna go with this approach which is:

in your app.module.ts,

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot({ 
      mode: 'ios'
     }),
    AppRoutingModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent],
})

so in the IonicModule forRoot you specify ios to apply ios design for your whole app.

Now in case you need to test app as native functionality then for sure the solution would not be web approach.. you just in this case to install a vmware then install a macOS version on it, then install xcode and then test your app normally on a simulator and still some things may not function as a real device..