I've found a better method to detect if the dashboard is visited on a mobile device

There were a lot of posts about detecting if a mobile device was in use. I hope my discovery could help somebody.

The default one suggest using the device (viewport) width, but that could fail easily when you open 2 (or 3) windows side-by-side on a computer.

Some suggest using custom cards or long deprecated custom frontend elements. This might be fine but can be done better.

The new(?) method for me was to use the “screen” condition, but not the screen width. After looking at the configs for the “screen” condition more closely, I’ve found a high degree of similarity between it and the CSS media queries. I then looked online and found this and tried it on my dashboard, which resulted in this discovery.

# for mobile device
type: conditional
conditions:
  - condition: screen
    media_query: (pointer:coarse)
card:
    ...
# for computer
type: conditional
conditions:
  - condition: screen
    media_query: (pointer:fine)
card:
    ...

unfortunately this could confuse the visual editor but it certainly works. I used this to decide if a URL in the action should be a deep-link or not.