Mike Zak Mike Zak - 11 months ago 109
CSS Question

Ionic 2 large screen resolution apps

I would like to make a web app, admin like app with ionic, fit on monitor screen with large resolution, but ionic is primarily designed for mobile apps, how can I layout my app so that in the future I can remove some columns and make it fit mobile app resolution as well.

Is there a way to check the resolution size and based on that decide to show or hide some content.


Answer Source

You could decide how the layout is going to be shown by using the platform information:

Platform Name  Description
android        on a device running Android.
cordova        on a device running Cordova.
core           on a desktop device.
ios            on a device running iOS.
ipad           on an iPad device.
iphone         on an iPhone device.
mobile         on a mobile device.
mobileweb      in a browser on a mobile device.
phablet        on a phablet device.
tablet         on a tablet device.
windows        on a device running Windows.

By using the underlying platform information you could adapt the layout if the app is being shown in a desktop (core) or a tablet (ipad or tablet) and so on:

this.isDesktop = this.platform.is('core');
this.isTabletOrIpad = this.platform.is('tablet') || this.platform.is('ipad');

And then by using *ngIf, showWhen, setting Grid Column Percentage Attributes dinamically or whatever you need in your views to design the appropriated layout.

Please notice that using the platform information is not only important in the view, but also in the Component code. That way, you can avoid initializing or executing code that you're not going to show later in the view (for instance, it does not make sense to load a map that should only be shown on desktop if then you're not going to show it in the view because the application is being used in a mobile device).