|
|
| Line 1: |
Line 1: |
| <!-- !!! -->
| | The content on this page has moved to https://documentation.open-xchange.com/latest/ui/miscellaneous/device.html |
| <!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->
| |
| <!-- !!! -->
| |
|
| |
|
| {{Stability-unstable}}
| | 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. |
| | |
| <div class="title">_.device() reference</div>
| |
| | |
| The function <tt>_.device()</tt> is used to test various device-specific aspects of the runtime environment. It is also used to evaluate the <tt>device</tt> clause of manifest entries.
| |
| | |
| __TOC__
| |
| | |
| = Syntax =
| |
| | |
| The single parameter of the function is a string describing the test to perform. The string is evaluated as a JavaScript expression which uses one or more pre-defined variables. The result is then always converted to a boolean value. Empty strings and other 'falsy' values evaluate to <tt>true</tt>. While the implementation currently simply uses the native JavaScript interpreter, only parentheses, boolean operators and numerical comparisons are guaranteed to actually work.
| |
| | |
| = Variables =
| |
| | |
| This section lists the supported variable names which can be passed to <tt>_.device()</tt>. The current list of variables and their values can be displayed by calling <tt>_.device()</tt> without arguments in the browser's JavaScript console. All variables are case-insensitive, and by convention are lower-case.
| |
| | |
| While all variables can be used as boolean flags, most variables representing browsers and operating systems are actually numbers and can be used to check for specific browser or OS versions. The remaining browser and OS variables can become numbers in the future, too. The numbers are usually integers, i.e. they contain only the major version number.
| |
| | |
| == Browsers ==
| |
| | |
| * Numeric versions
| |
| ** <tt>ie</tt>
| |
| ** <tt>opera</tt>
| |
| ** <tt>safari</tt>
| |
| ** <tt>phantomjs</tt>
| |
| ** <tt>chrome</tt>
| |
| ** <tt>firefox</tt>
| |
| * Boolean flags
| |
| ** <tt>webkit</tt>
| |
| ** <tt>chromeios</tt>
| |
| ** <tt>uiwebview</tt>
| |
| | |
| == Operating systems ==
| |
| | |
| * Numeric versions
| |
| ** <tt>blackberry</tt>
| |
| ** <tt>ios</tt>
| |
| ** <tt>android</tt>
| |
| * Boolean flags
| |
| ** <tt>windowsphone</tt>
| |
| ** <tt>macos</tt>
| |
| ** <tt>windows</tt>
| |
| | |
| == Display metrics ==
| |
| | |
| * <tt>small</tt> (up to 480px)
| |
| * <tt>medium</tt> (481px to 1024px)
| |
| * <tt>large</tt> (1025px and more)
| |
| * <tt>landscape</tt>
| |
| * <tt>portrait</tt>
| |
| * <tt>retina</tt>
| |
| * <tt>smartphone</tt>
| |
| * <tt>tablet</tt>
| |
| * <tt>desktop</tt>
| |
| | |
| == Language ==
| |
| | |
| The current language code is defined as a variable. To match any variant of the current language, the second part can be replaced by an asterisk. E.g. if the current language is en_US, then the following variables would be defined:
| |
| | |
| * <tt>en_us</tt>
| |
| * <tt>en_*</tt>
| |
| | |
| == Miscellaneous ==
| |
| | |
| * <tt>touch</tt>
| |
| * <tt>standalone</tt>
| |
| * <tt>emoji</tt>
| |
| | |
| = Examples =
| |
| | |
| The simplest example is a single variable, e.g.
| |
| <pre class="language-javascript">_.device('smartphone')</pre>
| |
| <pre class="language-javascript">_.device('firefox')</pre>
| |
| or
| |
| <pre class="language-javascript">_.device('de_*')</pre>
| |
| | |
| Workarounds for specific older browsers can be enabled by testing for a specific version, e.g.
| |
| <pre class="language-javascript">_.device('ie && (ie < 11)')</pre>
| |
| The additional check for the correct browser is necessary because in other browsers, the variable <tt>ie</tt> evaluates to <tt>undefined</tt>, and the comparisons with numbers always return <tt>false</tt>. This may or may not be what is desired, so an explicit check for the browser is less error-prone and easier to understand.
| |