如何在Streamlit中获取页面尺寸？现有方法仅返回屏幕尺寸

你之前用screen.width和screen.height拿到的是设备屏幕的固定物理尺寸，和浏览器窗口缩放无关。要获取当前浏览器视口（也就是Streamlit页面实际显示的区域）的实时尺寸，需要调整JavaScript表达式，再结合会话状态实现动态更新。

可行代码示例 #

import streamlit as st
from streamlit_js_eval import streamlit_js_eval

# 初始化会话状态，存储视口尺寸
if 'viewport_width' not in st.session_state:
    st.session_state.viewport_width = 0
if 'viewport_height' not in st.session_state:
    st.session_state.viewport_height = 0

# 定义更新尺寸的回调函数
def update_size(width, height):
    st.session_state.viewport_width = width
    st.session_state.viewport_height = height
    st.rerun()

# 调用JS获取实时视口尺寸，并设置定期检查
streamlit_js_eval(
    js_expressions="JSON.stringify({width: window.innerWidth, height: window.innerHeight})",
    key="viewport_update",
    callback=update_size,
    interval=200  # 每200毫秒更新一次，可根据需求调整
)

# 展示当前尺寸
st.write(f"当前页面宽度: {st.session_state.viewport_width}px")
st.write(f"当前页面高度: {st.session_state.viewport_height}px")

关键说明 #

• 改用window.innerWidth和window.innerHeight：这两个JS属性会返回浏览器当前可视区域的宽高，窗口缩放时数值会实时变化
• 借助st.session_state存储尺寸数据，配合st.rerun()让页面自动刷新，展示最新的尺寸值
• 设置interval参数：定期执行JS代码，保证窗口缩放时尺寸能及时同步到Streamlit页面

内容的提问来源于stack exchange，提问作者Nikolay Nikolaenko