传单无法正确缩放到移动设备

Question

我在缩放传单地图以适应移动设备时遇到问题。我正在使用 React、Leaflet(+React-Leaflet) 和 OpenStreetMaps 构建应用程序。

如果我将页脚或缩放控件等组件放在屏幕底部，它们会显示一半或根本不显示，因为它们隐藏在移动设备菜单后面。

举个例子。

Web version

Mobile version

在这种情况下，缩放控件组件根本不会出现在移动版本中。例如，如果我将地图高度属性更改为 90vh，它会再次出现。

Mobile version with 90vh

当然现在它可以工作了，但是看起来很丑而且没有响应。我该如何解决这个问题？

我已经关注了这个 example，但它似乎没有帮助。

Answer 1

我解决了这个问题。以防将来其他人遇到同样的问题，这是我的解决方案。

当您向地图组件添加 css 属性时，不要使用“height: 100vh;”，而是使用“height: 100%;”如此 example 所示。您应该使用设置为固定位置或绝对位置的包装器容器，以使高度 100% 正常工作。这是一个例子：

渲染地图组件

  <div className="map-wrapper">
    <Map/>
  </div>

CSS

.map-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
}

.map {
  width: 100%;
  height: 100%;
  position: relative;
}

Leaflet not scaling correctly to mobile devices