Right now we have 3 different checks:
- platform.is('tablet'). We barely use it to check size, and we shouldn't because it only takes into account if the physical device is a tablet, not the screen size. So for example in desktop it says false.
- CSS ( hidden-tablet & hidden-phone classes). They use a media query with min-width: 768px, it doesn't check the height.
- JS_: window.innerWidth >= 576 && window.innerHeight >= 576_. We check both width & height to prevent changing the behaviour if the device orientation changes.
It's a bit weird that in CSS we check a width of 768 and in JS we check a width/height of 576. Also, for JS we should have a function to check sizes based on a certain enum (e.g. "small", "medium", "large") like it's done in Bootstrap.