How to detect if user is on a mobile form factor?

help
1

I have/had a current trick that was working, but with one of the Meteor updates, it seems to have broken now. It’s kind of a cheap trick, but it was working.

I have this little bit of HTML at the end of my layout:

  <div class="mobile-sensor visible-xs-block"></div>

And then a global helper:

Template.registerHelper('isMobile', function () {
  return !!$('.mobile-sensor:visible').length;
});

This was working for a long time, but now it has a strange effect. When I first go to my page, I see the desktop layout. If I click a link (visit a route), then go back, it looks fine.

If I insert a console.log statement into the isMobile helper, I can see it fires off twice when my page loads. The first time, mobile-sensor is not there, and the second time immediately after, it’s there. So the helper is firing off twice, the second time returning true, yet the template doesn’t react.

I obviously need a less hacky way to detect mobile. I can’t use CSS media queries, because there are large chunks of template includes that are either displayed or not whether it’s a mobile device. Is there a better way?

2

did you try to use is.js package ?

they have this code

is.mobile();
=> true if current device is mobile

is.not.mobile();
=> true if current device is not mobile