You can use vIsMobileDevice in a ViewModel to adapt a Turnkey Angular user interface when the client identifies the device as mobile.

How it works

The Turnkey Angular client sets the value of vIsMobileDevice when a variable with that exact name exists in the ViewModel. The variable indicates whether the client sees the current device as a mobile device.

This is an opt-in built-in ViewModel variable: add it to the ViewModel when you need it. If the variable is not present, the client has no value to set.

Use the variable to make ViewModel-level decisions that would otherwise be handled with CSS media queries. For example, you can use it to choose between a compact mobile section and a desktop-oriented section of a form.

Add vIsMobileDevice to a ViewModel

1. Open the ViewModel in the ViewModel Editor.
2. Add a variable named exactly vIsMobileDevice.
3. Use the variable in the ViewModel's expressions and conditional presentation logic where the form needs to behave differently on mobile devices.
4. Run the form in the Turnkey Angular client. The client supplies the variable value when it initializes the ViewModel.

The name is case-sensitive in practice because the client recognizes the built-in variable by its specified name. Use vIsMobileDevice, not a renamed variant.

Example: choose a compact mobile section

Assume that a ViewModel contains two alternative presentation sections:

• A desktop section with several fields shown together.
• A compact section that presents the same task in a layout intended for a smaller screen.

Add vIsMobileDevice to the ViewModel and use its value in the condition that controls which section is presented:

vIsMobileDevice

Use the mobile condition for the compact section and the inverse condition for the desktop section. This keeps the responsive decision in the ViewModel instead of relying only on browser CSS rules.

Choose the right built-in variable

vIsMobileDevice answers whether the client sees the device as mobile. It does not provide a pixel measurement. When the layout decision depends on available viewport size rather than device classification, use the viewport variables instead.

Need	Built-in variable	Example
Choose a mobile-oriented or desktop-oriented ViewModel presentation	vIsMobileDevice	Show a compact editing section when the client sees a mobile device.
Adapt to the available viewport width	vClientScreenWidth	Use a narrower presentation when the viewport is below the width required by a multi-column layout.
Adapt to the available viewport height	vClientScreenHeight	Reduce vertically demanding content when the available viewport height is limited.

The full list of client-supplied variables is available in Documentation:Built in ViewModel variables.

Notes

• The Turnkey Angular client sets this value only when vIsMobileDevice exists in the ViewModel.
• Use this variable for ViewModel behavior and presentation choices. CSS media queries remain appropriate for styling concerns that belong in CSS.
• Device classification and viewport size are different inputs. A mobile device can have a wide viewport, and a non-mobile device can have a narrow browser window. Use vClientScreenWidth when width is the actual requirement.

See also

• Documentation:Built in ViewModel variables
• Documentation:VClientScreenWidth
• Documentation:ViewModel Editor
• Documentation:Getting MDriven benefits on devices