|
|
| (17 intermediate revisions by 5 users not shown) |
| Line 1: |
Line 1: |
| {{Stability-experimental}}
| | The content on this page has moved to https://documentation.open-xchange.com/7.10.2/ui/ |
|
| |
|
| <div class="title">Developing for mobile devices</div>
| | Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition. |
| | |
| ==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 [[AppSuite:UI_developer_primer | 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.
| |
| | |
| ==The _.device function==
| |
| | |
| 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 resulted is returned as a boolean.
| |
| | |
| ==Examples==
| |
| | |
| <pre class="language-javascript">
| |
| // 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
| |
| }
| |
| | |
| // 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
| |
| | |
| | |
| </pre>
| |