Deploy ionic2 mobile application as a Web application

Question

I want to provide different CSS for ionic2 mobile and web. For example: list differs in width and height for mobile and web application, list font and alignment is different for mobile and web. Please let me know how to achieve this for ionic2 mobile application.

Thanks,

Answer 1

you can achieve that by injecting Platform from ionic-angular and then using ngClass and a boolean flag to assign an appropiate class for each platform.

import { Platform } from 'ionic-angular';

isMobile: boolean;

constructor(platform: Platform) {
   platform.ready().then(() => this.isMobile = platform.is('mobile'));
}

and on the html:

<div [ngClass]="{'mobile-css': isMobile, 'web-css': !isMobile}"> </div>