Detect Mobile

[gmakstutis]

I’m wondering if there is a way to ‘detect’ whether you are viewing on mobile or desktop, and change something based on the result. For example, I have a set of navigation icons that I transclude into each page, but on mobile they are very small; so I’d like a different set of icons to appear.

So, I’m thinking that if there were a way of checking the ‘client’ (mobile/desktop), I could then transclude the appropriate file within icons. Perhaps using something like Dataview?

Any suggestions?

Thanks

[ryanjamurphy]

Mind sharing a sample of what you’re trying? I imagine CSS will be your solution here.

[gmakstutis]

Hi, I’ve found a work-around that doesn’t rely on detecting desktop/mobile.

I’m guessing that I could probably use CSS media queries, if I decide to go for detection. Would that be the recommended approach?

[ryanjamurphy]

There’s actually built-in classes to work with, e.g., .is-mobile.

Here’s a line from the Minimal theme using it: obsidian-minimal/main.css at c21b942e8c54d542b3434a772f99fda06b197f36 · kepano/obsidian-minimal · GitHub