Vue Common - Object Structures - device

The device object defines the device on which the application is running.

import Device from "devextreme/core/devices"
Type:

Object

This object is returned by the DevExpress.devices.current() and DevExpress.devices.real() methods to provide information on the device on which the application is currently running. Use the fields of this object to get the required information on the device.

You can emulate as if the application runs on another device. For this purpose, use the DevExpress.devices.current() function passing the required device object as a parameter.

The information on the device on which the application is currently running is used to provide an appropriate look and feel for the application. In particular, the styles that are most appropriate for the current device will be applied.

android

Indicates whether or not the device platform is Android.

Type:

Boolean

deviceType

Specifies the type of the device on which the application is running.

Type:

String

Accepted Values: 'phone' | 'tablet' | 'desktop'

The device type can influence how widgets are displayed and behave in the application.

NOTE
Use this field, as well as the platform and version fields, to define a device passed to the DevExpress.devices.current(device) method. In this instance, a particular predefined theme will always be applied to your DevExtreme application wherever the application runs.

generic

Indicates whether or not the device platform is generic, which means that the application will look and behave according to a generic "light" or "dark" theme.

Type:

Boolean

grade

Specifies a performance grade of the current device.

Type:

String

Accepted Values: 'A' | 'B' | 'C'

The current device can have one of the grades of its performance.

  • 'A'
    iPhone 5+ devices, Android 4.4, all other devices.

  • 'B'
    iPhone 4- devices, Android 4.3 -

  • 'C'
    No devices with this grade are known now.

Use the grade option when specifying the device on which a particular animation can be used.

JavaScript
DevExpress.animationPresets.registerPreset("my-animation", {
    animation: 'fade',
    device: { grade: 'A' },
});

DevExpress.animationPresets.registerPreset("my-animation", {
    animation: 'none',
    device: { grade: 'C' }
});

In the code above, when the 'my-animation' animation preset is requested, the 'fade' animation will be performed if the current device has the 'A' category and animation will not be performed at all if the current device has the 'C' category.

ios

Indicates whether or not the device platform is iOS.

Type:

Boolean

phone

Indicates whether or not the device type is 'phone'.

Type:

Boolean

platform

Specifies the platform of the device on which the application is running.

Type:

String

Accepted Values: 'android' | 'ios' | 'generic'

Depending on the device platform, a corresponding theme is applied to the application. The device platform is set to 'generic' when none of the platforms ('android' or 'ios') are identified. In this instance, a generic "light" or "dark" theme is applied. You can also set the 'generic' platform manually to provide a unique look and feel for the application on any device. For this purpose, use the DevExpress.devices.current(device) function, passing the device object with the platform field set to 'generic' as a parameter.

NOTE
In addition to the platform field, the version and deviceType fields can be set when defining a device to be passed to the DevExpress.devices.current(device) method.

tablet

Indicates whether or not the device type is 'tablet'.

Type:

Boolean

version

Specifies an array with the major and minor versions of the device platform.

Type:

Array<Number>

This option accepts an array of numbers, e.g. [8,1], which means that the platform version is "8.1".

The version of the device platform is important for native styling of the application according to the guidelines provided for each platform version.

NOTE
Use this field, as well as the platform and deviceType fields, to define a device passed to the DevExpress.devices.current(device) method. In this instance, a particular predefined theme will always be applied to your DevExtreme application wherever the application runs.