Target browser ( desktop ) through scss?

Ionic Framework ionic-v3
1

Hey guys just wondering if there is any easy way to target desktop browser through scss.

Essentially I was looking into a class that might be added to the app root similar to “md” and “ios”. It would be really great if they had let’s say a “browser” css class for non mobile stuff.

What I have found is “platform-core” class is applied for desktop browser on app root, but some research has lead me to believe this would not be a reliable way of targeting browser.

Thanks for any help in advance!

2

See: https://ionicframework.com/docs/api/platform/Platform/

  private getPlatformInfo() {

    if (isDebugMode) {

      if (this.platform.is('mobileweb') || this.platform.is('core')) {
        this.logger.info('The Application is running in a browser');
      } else {
        this.logger.info('The Application is running on a device');
      }

      if (this.platform.is('ios')) {
        this.logger.info('The Platform is iOS');
      } else if (this.platform.is('android')) {
        this.logger.info('The Platform is Android');
      } else if (this.platform.is('windows')) {
        this.logger.info('The Platform is Windows');
      }
    }
  }

If you know that the App is running in a ‘browser’ then you can set your theme accordingly:

<ion-nav main [root]="rootPage" #content swipeBackEnabled="false" [class]="theme"></ion-nav>

For example:

  public toggleTheme() {

    if (this.theme === 'facebook-messenger-theme') {
      this.theme = 'green-and-blue-theme';
    } else {
      this.theme = 'facebook-messenger-theme';
    }
  }

See: https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/