SVG 层图像不会在纵向模式下显示在 Mobile Safari 中

Question

我正在构建一个包含多个静态图像 SVG 图层的地图。每个层都有一个 maxResolution 设置，因此它们只出现在特定的缩放级别：

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Image({
        source: first,
        maxResolution: 4
      }),
      new ol.layer.Image({
        source: second,
        maxResolution: 2
      }),
      new ol.layer.Image({
        source: third,
        maxResolution: 1
      }),
    ],
    view: view
  });

在 Safari 中和 Chrome 在我的 Mac 中，这非常有效。

但是，在 MobileSafari 上，只有当我将 phone 旋转到水平模式时，这三个图层才会出现。

知道是什么导致了这个问题吗？

Answer 1

原来问题不在于图层/分辨率，而在于地图容器的大小。我使用 CSS:

调整大小

html, body {
  height: 99%;
  width: 100%;
}

这解决了问题 -- 它不喜欢 100% 的高度。

SVG 层图像不会在纵向模式下显示在 Mobile Safari 中

SVG layer images do not display in Mobile Safari in portrait mode

javascript

svg

mobile-safari

openlayers-3