Best approach for mobile-specific view logic?

1

Hi all,

I’m working on an app that will need some slightly different templating and logic on mobile devices (whether mobile browser or native app), and I’m trying to figure out the best way to handle this.

I found this: https://github.com/mystor/meteor-device-detection, which looks very promising, but I’m unsure yet how this would work with Cordova app generation. Is there a way to have a Cordova-specific client folder?

1 Like
2

I would use Template.dynamic along with a case switch helper. In the case switch, you can specify the default template to load and then the conditional ones for other devices.

http://docs.meteor.com/#/full/template_dynamic

1 Like
3

I’ve use isCordova http://docs.meteor.com/#/full/meteor_iscordova, simple bootstrap responsive utilities, and Modernizr in various ways to control what is displayed when my app is deployed both hybrid to desktop. Register template helpers that check if my app in running in Cordova or not and controlling.

I agree with @msavin , Dynamic Templates are a good approach, assuming you know the device/browser.

4

OK—I’m beginning to have a picture of what I need: dynamic templating based on BOTH isCordova() AND some way of detecting a mobile browser (other than media queries). Can you be more specific about how you’re doing the latter? You mentioned Modernizr, can you give me an example of how you’re using it?

Thanks all!

5

I mostly use isCordova and bootstrap visible-xs/hidden-xs, etc. Modernizr is more for isTouch device and feature detection.

if (Modernizr.touch) { 
alert('Touch Screen');
} else { 
alert('No Touch Screen');
}

So it is a combination of many things depending on the need.

I just found this and it looks interesting (crappy docs aside)

Don

6

One other thought—is there any advantage/disadvantage to doing this logic in the router (I’m using Iron Router presently)?

7

that device detection package is no longer supported. Is there another preferred method now?

8

Are you looking for a Mobile App or a Responsive site? For mobile apps (at least in case of Cordova) - it’s not required to detect the type of device.

9

@maxhodges ugh, bummer.

In my case I’m using device-detection to choose templates specifically designed for certain screen sizes, since the UX design may be completely different on a mobile device, requiring different events and template helpers, and often a very different page structure.

I might be able to do it exclusively using responsive css (i.e. media queries) but… it’s so much easier and cleaner (and easier to read and understand) to just do

{{#if isPhone}}
{{> mobileHome}}
{{else}}
{{> home}}
{{/if}}

etc. I guess the responsive equivalent is just two big container divs that are chosen to display or not based on media queries, but then you’re forcing the browser to load both “templates” even though one is going to be completely ignored.

I still feel like I’m missing something here, it feels inelegant to use both device-detection and media queries, and now device-detection is not being maintained. Is there another way?

1 Like
10

Hi @deligence1
responsive app!

11

Hello @maxhodges,

Can’t find anything in Meteor, but check https://github.com/zeno/mobile-detect-demo - It will work for meteor apps as well.