How to use mobile styles in the web version?

Ionic Framework ionic-v3
1

I’d like the web version of my project to look like the iOS versions, but on web it uses the -md (material design) one.

Is there any builtin way to do that?

2

To use ios mode everywhere, you can set the mode in app.module.ts:

IonicModule.forRoot(MyApp, {
      mode: 'ios'
    }, {}
)

However I don’t know how to make this applicable to PWA only and not the Android version, so you might have to build twice with this config enabled/disabled respectively.

1 Like
3

@pwespi your answer pointed me in the right direction, this is what I wanted:

I found this very helpful link in the docs

platforms: {
  core: {
    mode: 'ios',
  }
}

Update

I ended up not using the solution above, because I didn’t like ios transitions on a browser.

I used the mode attribute on some elements I wanted to style differently, like

<ion-list-header mode="ios">Header</ion-list-header>
1 Like