Difference between revisions of "AppSuite:Mobile"

m
Line 26: Line 26:
 
We extended underscore with a new function called <tt>_.device</tt>
 
We extended underscore with a new function called <tt>_.device</tt>
  
The <tt>_.device</tt> function can be used to retrieve informations about the device. The function takes a string as argument which contains a boolean expression. This expression will be evaluated and the result is returned as a boolean.
+
The <tt>_.device()</tt> function can be used to retrieve informations about the device. The function takes a string as argument which contains a boolean expression. This expression will be evaluated and the result is returned as a boolean.
  
 
The device function uses <tt>_.browser</tt> object for informations in combination with <tt>_.screenInfo</tt>
 
The device function uses <tt>_.browser</tt> object for informations in combination with <tt>_.screenInfo</tt>
 
  
 
==Examples==
 
==Examples==
 
 
<pre class="language-javascript">
 
<pre class="language-javascript">
 
// handle different mobile operating systems
 
// handle different mobile operating systems

Revision as of 13:13, 10 May 2013

API status: In Development

Developing for mobile devices

Introduction

App Suite is designed to work on all device types and sizes. The UI uses responsive design principles to scale nicely on each device size. We do define three display sizes to macht the majority of devices. These are simply named "small", "medium" and "large". Theses classes are used to match smartphones, tablets and desktop PCs. If you are developing a app for App Suite make sure it runs nicely and looks great on all of these three device categories. (If you are not familiar with latest CSS techniques and the principles of responsive design you should have a look at this article).

Often the simple use of media queries is not enough to customize your app for small and medium screens, you may need to customize your application code as well. We have integrated a function to detect everything you might want to know during runtime in your javascript code.

Sizes

The minimum device target size is 320 x 480 pixels. Your App should work on devices with this resolution.

small   up to 480px
medium 480px up to 1024px
large 1024px and higher

The _.device function

We extended underscore with a new function called _.device

The _.device() function can be used to retrieve informations about the device. The function takes a string as argument which contains a boolean expression. This expression will be evaluated and the result is returned as a boolean.

The device function uses _.browser object for informations in combination with _.screenInfo

Examples

// handle different mobile operating systems
if (_.device('ios')) {
   // true for all devices running iOS, no matter what version
   console.log('you are running iOS');
}

// combined statements
if (_.device('ios && android')) {
   // true for all android and iOS devices
}

// negation
if (_.device('!android')) {
    // true for all devices except android 
}

// screen information
if (_.device('small && iOS ')) {
   // true for iPhone, not for iPad
}

// shorthands
_.device('smartphone')
// true for small devices running a mobile OS (iOS, Android, BB or Windowsphone)

_.device('tablet')
// true for medium sized devices running a mobile OS

_.device('desktop')
// true for all devices not running a mobile OS

// getting version informations
_.device('ios > 5 && android > 4') 
// true for ios > 5, i.e. 5.1 and 6. Same for Android, 3.x will fail 4.0 or 4.1 will be true. 

// enhanced screen information 
_.device('iOS && retina && small')
// true for iPhone 4, 4s and 5 (retina display)

_.device('landscape && android && medium') 
// true for android tablet held in landscape mode

// other information, simple browser detection
_.device('safari || firefox')

Please note that information about device orientation may change during usage.