You can use vClientScreenWidth in a ViewModel to react to the current browser viewport width in a Turnkey Angular client.
What vClientScreenWidth does
vClientScreenWidth is an optional ViewModel variable. When the variable exists in the ViewModel, the Turnkey Angular client sets it to the width of the client's viewport.
This lets you make layout or presentation decisions at the ViewModel level rather than relying only on CSS media queries. For example, you can use the viewport width to show a compact presentation when the available width is below a value that you define.
Add the variable to a ViewModel
- Open the ViewModel in ViewModel Editor.
- Add a variable named exactly
vClientScreenWidth. - Use the variable in the ViewModel's expressions and presentation logic where the current viewport width should affect the result.
- Run the ViewModel in the Turnkey Angular client. The client supplies the current viewport width when the variable is present.
The name is significant. The Turnkey Angular client recognizes vClientScreenWidth; a differently named variable is not treated as this built-in client value.
Use it for ViewModel-level responsive behavior
Use vClientScreenWidth when the width should affect what the ViewModel presents or how it presents it.
For example, a ViewModel can use the value to select a compact presentation for narrow viewports and a wider presentation for larger viewports. This moves that decision into the ViewModel, where it can be combined with other ViewModel state, instead of expressing the decision only in CSS.
| Situation | ViewModel-level use |
|---|---|
| Narrow viewport | Use vClientScreenWidth as part of the condition for a compact presentation.
|
| Wide viewport | Use vClientScreenWidth as part of the condition for a presentation that has room for more information.
|
Choose the width threshold that fits your ViewModel and presentation. The supplied value is the client's viewport width, so your logic should be based on available viewport width rather than an assumed physical device size.
Related client values
vClientScreenWidth covers viewport width only. Add the corresponding built-in variable when your ViewModel also needs the viewport height:
- vClientScreenHeight provides the client's viewport height when it exists in the ViewModel.
- vIsMobileDevice provides whether the client is seen as a mobile device when it exists in the ViewModel.
- vClientLatitude and vClientLongitude use the same named-variable pattern for browser geolocation, subject to browser permission.
For the complete list of recognized variables, see Documentation:Built in ViewModel variables.