剧情图例无法在手机上缩放

Question

我正在使用Dash绘图。当我在桌面上查看时，它看起来不错

但是当我在手机上查看时，图例位置与图形重叠。

我的图例是使用

设置的

legend=dict(
    bgcolor='rgba(0,0,0,0)',
    orientation="h",
    yanchor="bottom",
    y=-0.15,
    xanchor="left",
    x=0
)

如何修复图例？ 奖励问题，如何修复模式栏？

Answer 1

我做了一个变通的解决方法。缩放问题的原因是手机的屏幕宽度非常小（约300像素），因此我将主体的最小宽度设置为500像素

body {
    min-width:500px;
}

这会使网站在首次加载后显示为放大，因此我放入了小型JS脚本

<meta id="myViewport" name="viewport" content="width=device-width" />
<script>
    window.onload = function () {
        if(window.innerWidth <= 500) {
            var mvp = document.getElementById('myViewport');
            mvp.setAttribute('content','width=500');
        }
    }
</script>

这似乎将其改进到了可用性。不是一个完美的解决方案，但是。。我之前也有锁定的长宽比，但是我已经解锁了手机的长宽比，因此可以自由伸缩。