Mapbox 图例适用于台式机、平板电脑，但不适用于移动设备。如何修复它以在移动设备上正确显示？

Question

在 Chrome 开发者工具中，图例完美地显示在桌面、平板电脑和移动设备的 Mapbox 地图之上。这是看起来的样子。它显示半透明的水平图例。

但如果我实际使用 iPhone，图例将无法正确显示。它变成垂直的并且所有格式似乎都丢失了。

这是我的地图框控件：

 // Control implemented as ES6 class
    class fs_legend_control {

        onAdd(map) {
        var fs_legend_control_html = ' \
        <div class="my-legend"> \
            <div class="legend-title">Piste Difficulty Legend</div> \
                <div class="legend-scale"> \
                    <ul class="legend-labels"> \
                        <li><span style="background:#339933;"></span>Novice</li> \
                        <li><span style="background:#097CCB;"></span>Easy</li> \
                        <li><span style="background:#ED151F;"></span>Intermed\'</li> \
                        <li><span style="background:#000000;"></span>Advanced</li> \
                        <li><span style="background:#ffa502;"></span>Expert</li> \
                        <li><span style="background:#ffff01;"></span>Freeride</li> \
                        <li><span style="background:#ffc0cb;"></span>Unrated</li> \
                    </ul> \
                </div> \
            <div class="legend-source"> <a href="https://www.example.com/pistes/">About Piste Difficulty</a></div> \
        </div> \
        ';

            this._map = map;
            this._container = document.createElement('div');
            this._container.className = 'fs-legend-control';
            this._container.innerHTML = fs_legend_control_html;
            return this._container;
        }
        onRemove() {
            this._container.parentNode.removeChild(this._container);
            this._map = undefined;
        }
    }

    map.addControl(new fs_legend_control(), "top-left");

为什么这不起作用？

Answer 1

哇，就这么简单[这个]。虽然 Chrome 开发者工具中的移动版本显示正确，但它在我的移动设备上显示不正确。我删除了手机上的 Chrome 并重新安装它，它起作用了。这也是提供的链接中使用的解决方案。但不知道为什么。