Tutorial by Examples

If your application is going to run on different devices, it's going to need to render to different ViewPorts, based on the device size. You can deal with this in two ways: with javascript rules, or CSS media styles. If you've been using a MVC or MVVM library, such as Angular or Ember (or Blaze, for...

If you're going to be designing layouts with fixed size screens for different mobile devices, you may want to mirror that design when running your app on a desktop. The following method fixes the size of the window OUTSIDE of PhoneGap, giving a fixed-sized window on the desktop. Sometimes it's easie...

To get all of this to work, you'll probably need offline support, which means caching application data and user data. meteor add appcache meteor add grounddb

On desktop apps, you may want to disable scroll-bounce, to give your app a more native feel. You can do this with javascript, by disabling how the browser controls the DOM: // prevent scrolling on the whole page // this is not meteorish; TODO: translate to meteor-centric code document.ontouchmove...

Mobile devices generally don't have keyboards, so you'll need to add some haptic controllers to your application. The two popular packages that people seem to be using is FastClick and Hammer. Installation is easy. meteor add fastclick meteor add hammer:hammer FastClick requires nearly no confi...

Before you compile your app and run it on your device, you'll need create some icons and splash screens, and add a mobile-config.js file to your app. App.icons({ // iOS 'iphone': 'resources/icons/icon-60x60.png', 'iphone_2x': 'resources/icons/[email protected]', 'ipad': 'resources/icons...

Now it's time to go through the Meteor Cordova Phonegap Integration documentation. Since that documentation was written, XCode and Yosemite have been released, which has caused some hiccups in installation. Here are the steps we had to go through to get Meteor compiled to an iOS device. Upgrade ...

Register your Apple Developer Account Register an App ID for your app Register the UUID of your testing devices Generate an iOS App Development provisioning profile Generate a CertificateSigningRequest from KeychainAccess Submit CertificateSigningRequest to https://developer.apple.com/accou...

Make sure your development workstation and iPhone are connected to the same WiFi network. Tethering, hotspots, and other ad-hoc networking won't work. Run sudo meteor run ios-device Deploy to your device!

Meteor reads a mobile-config.js file in the root of your app directory during build, and uses the settings specified there to generate Cordova’s config.xml. Project_folder ├── /.meteor └── mobile-config.js Most configurations can be achieved with mobile-config.js (app metadata, preferences, ...

Of course, the best way to detect mobile is for the hardware to notify you directly. Cordova PhoneGap exposes a 'deviceready' event, that you can add an event listener to. document.addEventListener('deviceready', function(){ Session.set('deviceready', true); }, false);