How to make selected features available on mobile

Hi all,

I will present one of the ways to make features selection on mobiles.

To achieve our goal we have to:

  1. Find out which way app was launched
    For that the Window interface’s matchMedia() method seems to be good (matchMedia | Can I use... Support tables for HTML5, CSS3, etc)

  2. Track when the display mode changes
    EventListener to listen for changes to the display-mode media query.

  3. Update UI
    Using conditional CSS like:
    @media all and (display-mode: standalone)

For more please read https://web.dev/customize-install/#detect-launch-type where are code samples.

Potencial problem could be updating CSS files - it takes much time. Implementig above functionality seems to be pretty simple.

Any feedback will be appreciated:)

Best,
Magalena

1 Like

Additionally, while using React there is a react-device-detect package https://www.npmjs.com/package/react-device-detect, which allows to check launching method and allow to adjust rendering to each device.

Best,
Magdalena

Thanks @MagdalenaToczek ,

Curious did you have the chance to build a proof of concept that could help illustrate this for our project?

Proof of concept for that would require most of the migration done. Instead I’ve prepared proof of concept for using matchMedia() method which I’ve mentioned above. Here is link with film where is shown that on smaller window width table in Physical inventory and System notifications on home page is not rendered.