Detect Mobile

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?


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

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?

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.