You can use vClientScreenHeight in a ViewModel to make ViewModel-level decisions from the height of the client viewport in a Turnkey Angular client.

What vClientScreenHeight does

vClientScreenHeight is a built-in ViewModel variable name. If a variable with this name exists in the ViewModel, the Turnkey Angular client sets its value to the height of the client's viewport.

This lets you model viewport-height-aware behavior in the ViewModel instead of relying only on CSS media queries. For example, a ViewModel can use the viewport height as an input when deciding which ViewModel content or behavior to present.

Add the variable to a ViewModel

1. Open the ViewModel in ViewModel Editor.
2. Define a variable named vClientScreenHeight in that ViewModel.
3. Use the variable in the ViewModel logic where the available client height affects the intended behavior.
4. Run the ViewModel in the Turnkey Angular client. When the variable exists, the client supplies the viewport-height value.

The name must be spelled exactly as vClientScreenHeight. The client sets this value only when the variable exists in the ViewModel.

Example: model a height-aware ViewModel decision

A ViewModel may need to treat a short browser viewport differently from a tall one. Define vClientScreenHeight, then use its value as the ViewModel-level input for that decision. This keeps the decision in the ViewModel, where it can be used by ViewModel logic, rather than limiting the behavior to stylesheet rules.

Use CSS media queries when the change is only visual styling. Use vClientScreenHeight when the viewport height needs to participate in ViewModel behavior.

Use with viewport width

For decisions that depend on both viewport dimensions, also define vClientScreenWidth. The Turnkey Angular client sets both variables when they exist in the ViewModel.

For example, a ViewModel can consider both available width and available height when its behavior must account for the overall viewport shape.

Related built-in variables

vClientScreenHeight is one of the built-in ViewModel variables. That page also lists variables for the viewport width and whether the client is regarded as a mobile device.

See also

• Documentation:VClientScreenWidth
• Documentation:Built in ViewModel variables
• Documentation:ViewModel Editor