0

I'm working on simple hybrid app and I'm using Onsen UI using purely JavaScript, and everything is working good so far. The only issue I have is determining if the mobile device is a Tablet or Phone. I found ons.platform reference, and the isAndroidTablet() method, but I can't figure out how to use it. I used the <ons-if orientation="landscape"> and <ons-if platform="android"> to modify a few DOM elements when in landscape orientation and/or android, and it works great, but if I could use this isAndroidTablet() option, it would be great. I've been looking everywhere, but I can't find any documentation in addition to what's already on the Onsen UI pages. This is what I have so far: 

 <ons-if orientation="landscape">
  <div id="overlay">
    <ons-scroller style="height:300px">
      <ons-list id="theList">
      </ons-list>
     </ons-scroller>
    <ons-if platform="android">I'm Android
   </ons-if>
  </div>
 </ons-if>

I would like to replace the <ons-if orientation="landscape"> with something like what isAndroidTablet() I guess should do. Anyone out there has had any experience with this? Thanks!

cubanGuy
  • 1,226
  • 3
  • 26
  • 48

1 Answers1

1

I have no experience with Onsen UI but from what I seen it's based on angular2(or react or vue). If you use angular, theoretically, you could use an *ngIf in your template.. Like a 

<div *ngIf="isAndroidTablet()">...</div>

Here you can find some template example with what I said earlier

Daniel Bejan
  • 1,468
  • 1
  • 15
  • 39
  • Thanks @csanonymus, I actually found the answer well hidden among Onsen UI documentation [link](https://onsen.io/v2/guide/theming.html#cross-platform-styling-autostyling). Then I just added `console.log(ons.platform.isAndroidTablet());` for testing purposes and it worked perfectly. – cubanGuy Aug 13 '17 at 14:32