Dash/Plotly图表移动端宽度显示异常问题求助

1. 修复容器响应式宽度配置 #

确保图表父容器采用弹性宽度设置，避免固定像素宽度：

.chart-container {
  width: 100%;
  max-width: 800px; /* 可选，限制桌面端最大显示宽度 */
  margin: 0 auto;
}

如果使用Chart.js、ECharts这类可视化库，初始化时开启响应式配置：

// 以Chart.js为例
const chart = new Chart(document.getElementById('chart'), {
  type: 'bar',
  data: yourWordCountData,
  options: {
    responsive: true,
    maintainAspectRatio: false, // 可选，关闭固定比例以适配容器高度
  }
});

2. 配置正确的移动端视口 #

在HTML头部添加视口元标签，让浏览器正确识别移动端屏幕宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. 修正定位导致的宽度塌陷 #

如果图表容器使用绝对定位，需给父容器设置相对定位，并让容器占满横向空间：

.parent-box {
  position: relative;
  height: 350px; /* 给父容器设置固定高度 */
}
.chart-container {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
}

4. 排查媒体查询冲突 #

检查是否有移动端媒体查询错误覆盖了宽度设置，比如：

/* 移除这类错误配置 */
@media (max-width: 768px) {
  .chart-container {
    width: 0;
  }
}

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