How can we make our application mobile friendlier? We all know about media queries. Media queries allow us to adjust the style for different screens. That means we need to define the screen size that we want to support and write those media queries everywhere where we need them.
If you use media queries you know they are not as convenient as we want. Probably because of that, we can find a lot of frameworks that use media queries and make them friendlier for developers.
Angular also has a solution to make a web application responsive. Under the hood, it also uses media queries.
The BreakpointObserver Service
The BreakpointObserver Service gives us the opportunity to detect the screen size, the device type, and even the orientation. We can make a subscription for a special breakpoint value. When this specific value appears this service will notify us and we can make changes in styles.
All those breakpoints have a specific media queries value.
Web (min-width: 840px) and (orientation: portrait), (min-width: 1280px) and (orientation: landscape)
WebLandscape (min-width: 1280px) and (orientation: landscape)
WebPortrait (min-width: 840px) and (orientation: portrait)
Tablet (min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), (min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)
TabletPortrait (min-width: 600px) and (max-width: 839.98px) and (orientation: portrait)
TabletLandscape (min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)
Handset (max-width: 599.98px) and (orientation: portrait), (max-width: 959.98px) and (orientation: landscape)
HandsetLandscape (max-width: 959.98px) and (orientation: landscape)
HandsetPortrait (max-width: 599.98px) and (orientation: portrait)
XSmall (max-width: 599.98px)
Small (min-width: 600px) and (max-width: 959.98px)
Medium (min-width: 960px) and (max-width: 1279.98px)
Large (min-width: 1280px) and (max-width: 1919.98px)
XLarge (min-width: 1920px)
The breakpoints list has everything that we need and from now on we do not need to write those media queries in CSS files.
Here is an example of how we can use a breakpointObserver service.
The Responsive Service
Using a breakpoint service we can create a service that fulfills all our needs. Let’s think about what our service should do. For sure we need to know the screen size, device type, and orientation.
First, we need to create a couple of enums to help us.
To define screen size we need to make a subscription for all breakpoints screen sizes and match it.
The same we need to do with the device and orientation. The only difference when we know a breakpoint type is that we parse breakpoint enum to define the device and orientation.
I think it also will be good to have a couple of boolean functions like — Is the current device mobile?
The Responsive Service in action
How to use our service? We need to put it in the provider section and inject it in the place where we want to use it. Because our service makes a subscription in the constructor that means it is ready to use.
In HTML we can set up the right class according to device or orientation or screen size.
Now we have a service that can help us make a responsive design.
If you need to take a close look at the project here is the link.
Originally published at http://tomorrowmeannever.wordpress.com on October 14, 2022.
