DeviceService
injectable
This service is used to adapt styles and designs of the client to different devices and screen sizes.
Using screenChange$ observable you are able to monitor changes to the screen size and act upon it.
This service will also adds attributes to the body tag that reflect the current screen/device state. This way you can apply secific styles in your css files for different screen resolutions and orientations.
Attributes applied to the body tag are:
-
data-screen- [s, m, l, xl] - for different screen sizes (s: for mobile phone like screen sizes, m: for tablet like screen sizes, ‘l’: for desktop like screen sizes, ‘xl’: for screen sizes exceeding the desktop screen size). -
data-orientation- [portrait, landscape] - for the current screen orientation -
data-touch-enabled- [true] - if the device has touch capabilities (won’t be added if the device doesn’t have touch capabilities)
Example :
<body data-screen-size="s" data-screen-orientation="portrait" data-touch-enabled="true">
...
</body>Methods
Section titled “Methods”init(supportsSmallScreens: boolean): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| supportsSmallScreens | boolean |