Search code examples
node.jsangularionic-frameworkionic4ionic5

Ionic different styles for emulator and web localhost

I have different views on for browser and emulator.I think css codes doesnt work except browser currently.

For example I changed -ion-background-color: for .md body and iosbody. But emulator is displaying default theme as well:

different views

Please advise me?

I am using Ionic 5 and configs like below :

ionic (Ionic CLI)             : 4.12.0 (C:\Users\hckav\node_modules\ionic)
Ionic Framework               : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics    : 8.3.26
@angular/cli                  : 8.3.26
@ionic/angular-toolkit        : 2.2.0

Capacitor:

capacitor (Capacitor CLI) : 2.0.1
@capacitor/core           : 2.0.1

System:

NodeJS : v12.14.1 (C:\Program Files\nodejs\node.exe)
npm    : 6.14.4
OS     : Windows 10
Solution

  • When you build your app to run on iOS or Android, these classes are automatically added to the body tag.

    iOS: <body class="platform-ios">

    Android: <body class="platform-android">

    Web: <body class="platform-browser">

    That is why they are different. U can add your class dynamically to your body tag to solve it