My streamlit website behaves differently on mobile and dektop

Using Streamlit
, ,
1

Hi everyone,

I’ve been making this website with streamlit. The idea is you put in a large biological taxon (like, turtles, or butterflies), and a place, and it returns the most common species according to iNaturalist data, with a nice little heatmap showing what months they’re most common in. I posted it on the iNaturalist forums and people liked it! And had a lot of suggestions, which I’ve been working to address.

One thing people wanted was a way to control the heatmap output, to change the top value and maybe hide some of the top results. To do this, I wanted to use sliders (because they show you what the possible values are), but when I did, I found that they could be a little hard to control. So I introduced text input too and then I had to make them agree with one another. You can look at the code in my Git repository and see that it took a lot of session states, etc., but I eventually got all the values to agree and update when I wanted them to.

The issue is, when I try the app on mobile, the sliders no longer work! I try it on desktop, they work fine. I’m sure it has something to do with my complicated and janky use of session states, but is there any way around it? Can I maybe make the site look different on mobile so I just hide the sliders?

2

Welcome to the Streamlit community and thanks for sharing your project and question! :tada: It’s awesome that your app is getting traction and feedback from the iNaturalist community.

Your issue—sliders not working on mobile while they do on desktop—can stem from a few things, especially when session state and widget synchronization get complex. There’s no built-in Streamlit API to detect mobile devices directly, but you can use a workaround by capturing the browser’s user agent with a custom component like streamlit-javascript or streamlit_js_eval, then parse it to determine if the user is on mobile. Based on that, you can conditionally render or hide widgets like sliders for mobile users. See examples and discussion in the community here and here.

Here’s a minimal example using streamlit-javascript and user-agents:

from streamlit_javascript import st_javascript
from user_agents import parse

ua_string = st_javascript("window.navigator.userAgent;")
user_agent = parse(ua_string)
is_mobile = user_agent.is_mobile

if is_mobile:
    st.info("You're on mobile! Sliders are hidden for better experience.")
    # Show only text inputs or alternative UI
else:
    # Show sliders and full desktop UI

This way, you can tailor your UI for mobile users and avoid the slider/session state headaches on those devices. If you’d like a deeper dive into debugging your session state logic or want to share a minimal reproducible example, feel free to post your code or repo link—community members are always happy to help!

Sources: