单张瓷砖在移动设备上正确加载

Question

我在移动设备上错误地填充了传单地图的问题。

该地图的目的是加载一个25.748503，-80.286949（迈阿密市中心）的纬度/经度，但在移动设备上它的载荷约为25.584223，-80.028805（大西洋沿岸）。

将地图拖回到正确的位置似乎会触发其他图块和图层加载，因此更改屏幕方向也是如此。此外，图层和图块在桌面上正常加载。

我已经附上了如何正确加载以及它应该如何加载的图片。

使用Safari和Chrome在iPhone 6+上进行了测试。

任何想法都会很棒，谢谢！

以下是用于构建地图的代码片段：

// from main.js

var tiles = new L.StamenTileLayer('toner-lite');

var lat = 25.748503;
var lon = -80.286949;

var map = new L.Map('map-container', {
    center: new L.LatLng(lat, lon),
    zoom: 8.5,
    minZoom: 7,
    maxZoom: 16,
    zoomControl: false,
    doubleClickZoom: false,
    VML: true,
    scrollWheelZoom: false
}).addLayer(tiles);


// from _map-container.scss

#map-container {
  width: 100%;
  height: 100vh;

  @media (max-width: $screen-md) {
    height: 50vh;
  }
}

.leaflet-bottom.leaflet-left {
  background: #F4F4F4;
  padding: 0 0.25em;
  font-size: 11px;
  font-family: $sans-serif;
}