Using Device Grade in Ionic Framework Apps

Sometimes, you just have to cheat. When developing mobile hybrid apps, you've got a whole slew of devices, manufacturers, and operating systems to deal with. To make matters worse, you also have to deal with various browser rendering engines.

Ionic Framework does an incredible job of leveling the playing field for most devices and OS's. The Framework accomplishes this with a browser detection system and grades them. If the device is running a low grade browser (sounds like a sickness), then it will reduce the amount of transitions and other performance affecting animations.

However, sometimes, you just need to do X for these browsers and Y for these other browsers. I started out with that exact problem this morning. Some Android beta testers were having trouble with my app's home screen layout. I needed a quick fix and didn't have time to really solve this the right way. So, I cheated.

ionic.Platform is your friend. It provides many methods to help you adjust your code depending on the device the app is running on. You can manually "set" the grade if necessary. For determining the detected device grade, the "grade" is simply a property. So, you can do something like this : $scope.grade = ionic.Platform.grade.

Now, you can use this in the view to force a specific layout for specific grades. No, it's not ideal, but it works in a pinch.

.controller('MyController', function($scope) {
  $scope.grade = ionic.Platform.grade
});

<div ng-if="grade === 'a'">
  <p>Do something for Grade 'A' devices</p>
</div>

<div ng-if="grade === 'b'">
  <p>Do something for Grade 'B' devices</p>
</div>