How can Ionic be setup to render in the iOS style by default?

问题

Right now the ionic app renders with android styling by default. Instead of using the ?ionicplatform=ios param every single time I'd like that to be the default option.

I looked for hints in the config.xml as well as the config settings in app.module.ts such as:

IonicModule.forRoot(
      MyApp, 
      {
        swipeBackEnabled: true,
        platforms: {
          ios: {
            swipeBackEnabled: true,
            statusbarPadding: false
          }
        }
      }
    ),

and was unable to find an elegant way of doing it...Any ideas?

回答1:

You just need to do this:

app.module.ts

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

Note: From @sebaferreras

Btw, by setting this config the app will use the ios styles and components even if you run it on an Android device. Please notice that?ionicplatform=ios is just used to see how the app looks like when using the browser, but does not affect how the app is built. But setting mode: 'ios' will force the ios mode and apply the ios styles even if you build and create a .apk file.

回答2:

Please try this in your index.html file

I tried the below html code in ionic 4 and it works

Use the below one for getting styled your apk same as ios.

<html lang=“en” dir=“ltr” class=“plt-iphone plt-ios plt-phablet plt-mobile ios” mode=“ios”>

Use the below one for getting styled your ios app same as android.

<html lang=“en” dir=“ltr” class=“plt-android plt-mobile md” mode=“md”>

回答3:

in index.html just define mode

For iOS

<html lang="en" mode="ios">

For android

<html lang="en" mode="md">

回答4:

For anybody using the new Vue.js support for Ionic, forcing the rendering mode can be achieved by doing this when you import Vue:

import Vue from 'vue';

// ios
Vue.use(Ionic, {
  mode: 'ios'
});

// material design
Vue.use(Ionic, {
  mode: 'md'
});

来源：https://stackoverflow.com/questions/46705791/how-can-ionic-be-setup-to-render-in-the-ios-style-by-default

标签

android

ios

angular

ionic2

ionic3