Mapbox图例在桌面、平板正常，移动端显示异常，如何修复？

问题原因 #

1. iOS Safari 默认样式冲突：iPhone的Safari浏览器会给<ul>、<li>这类列表元素添加默认的内边距、外边距和项目符号，且对Flex等布局属性的解析逻辑和Chrome存在差异——桌面模拟用Chrome内核，不会触发这些样式冲突，但真机Safari会直接破坏布局。
2. 缺少Safari兼容的CSS前缀：如果你的自定义CSS里用了Flexbox等现代布局属性，没加-webkit-前缀的话，iOS Safari无法正确识别，导致水平布局失效，变成默认的垂直排列。
3. 可能未配置正确的viewport：页面如果没加viewport meta标签，iOS会把页面按桌面端尺寸缩放显示，进一步打乱图例的布局结构。

修复步骤 #

1. 补充兼容Safari的CSS样式 #

给图例添加以下CSS，覆盖默认样式并适配iOS Safari：

/* 控件容器基础样式 */
.fs-legend-control {
  padding: 8px 12px;
  background: rgba(255,255,255,0.8);
  border-radius: 4px;
}

.my-legend .legend-title {
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 14px;
}

/* 重置列表默认样式，添加Safari兼容的Flex布局 */
.my-legend .legend-labels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.my-legend .legend-labels li {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

/* 颜色块样式 */
.my-legend .legend-labels span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

/* 来源链接样式 */
.legend-source {
  margin-top: 8px;
  font-size: 12px;
}

.legend-source a {
  color: #097CCB;
  text-decoration: none;
}

.legend-source a:hover {
  text-decoration: underline;
}

2. 配置正确的viewport标签 #

在HTML的<head>中添加以下标签，确保iOS设备正确识别页面宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 简化JS中的HTML字符串（可选） #

把原代码中转义的HTML字符串换成ES6模板字符串，避免转义错误，代码更易维护：

class fs_legend_control {
  onAdd(map) {
    this._map = map;
    this._container = document.createElement('div');
    this._container.className = 'fs-legend-control';
    // 用模板字符串直接编写HTML，无需转义
    this._container.innerHTML = `
      <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>
    `;
    return this._container;
  }
  onRemove() {
    this._container.parentNode.removeChild(this._container);
    this._map = undefined;
  }
}

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

验证 #

部署修改后的代码后，用iPhone真机测试，图例会恢复为半透明水平排列的正常样式，和桌面模拟环境一致。

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