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
  });

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

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

知道可能导致此问题的原因是什么？

Answer 1

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

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

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