How to create completely different Shiny UIs based on device

I have a Shiny app that looks great on large screen (i.e. "desktop"), but isn't great on phones (i.e. "mobile"). I'm also halfway decent at fluid layouts with Bootstrap, but in this case the phone lends itself to a dramatically different display, where many of the panels simply aren't shown at all on mobile by default (e.g. they'd get re-organized into a few tabsets instead). I've also looked at the nifty shinyMobile framework, which I could definitely work with, but then it also changes my already-fine desktop layout.

So, I'm wondering how people switch Shiny app UIs between devices (if at all). One way that comes to mind is put both UIs in completely separate server-side variables, then make the default UI a stripped-down version that simply includes a uiOutput placeholder and design a custom JS input element that tries to do device-detection and lets the server-side renderUI handle deciding which UI to actually send back to the client. This seems like a pretty ham-fisted approach, and so I'm curious if there are already elegant solutions that folks here have used themselves.

1 Like
