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 中是否有任何扩展程序已在重新安装过程中删除：这些扩展程序可能会干扰网页渲染。

Answer 2

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

Answer 3

当您的 Mapbox 图例可以在台式机和平板电脑上运行但不能在移动设备上运行时，需要考虑一些潜在问题以及可以采取的步骤来排查和解决问题：

响应式 CSS：确保您的 CSS 样式具有响应式且适合移动设备。检查图例是否应用了特定样式，这些样式可能会导致较小屏幕上的布局问题。使用媒体查询来调整不同屏幕尺寸的样式。

@media (max-width: 768px) {
    /* Mobile styles for the legend */
}

视口设置：验证 HTML 部分中的元视口标签。确保其配置正确，以确保网页在移动设备上正确呈现。

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

Javascript 错误：检查浏览器的开发者控制台是否有任何特定于移动设备的 JavaScript 错误。这些错误可能会导致图例无法正确呈现。解决这些错误可以解决问题。

浏览器兼容性：在多个移动浏览器（例如 Chrome、Safari、Firefox）上测试地图和图例，看看问题是否在不同平台上仍然存在。有时，特定于浏览器的 CSS 或 JavaScript 不一致可能会导致问题。

Mapbox 库：确保您使用的是最新版本的 Mapbox JavaScript 库。旧版本可能与某些移动设备存在兼容性问题。将库更新到最新版本，以便从错误修复和改进中受益。

图例标记：仔细检查图例的 HTML 标记和 CSS 样式。图例元素的结构可能不适合移动设备。如果需要，简化图例设计，重点关注基本 HTML 和 CSS 以确保兼容性。

通过解决这些问题并在各种移动设备和浏览器上测试您的应用程序，您应该能够识别并解决导致 Mapbox 图例在移动设备上无法正确显示的问题。