Openlayers3 ol.control.FullScreen 在 iOS 上不起作用答案

【问题标题】：Openlayers3 ol.control.FullScreen doesn't work on iOSOpenlayers3 ol.control.FullScreen 在 iOS 上不起作用
【发布时间】：2016-04-14 17:16:38
【问题描述】：

iOS 上的 Safari 没有全屏 API，因此，如文档中所述，ol.control.FullScreen 不可用。

有推荐的解决方法吗？不能在 iPad 上全屏设置我的地图我太难过了！！

谢谢，

奥利维尔

【问题讨论】：

请不要使用多个感叹号。大喊大叫不会得到更多人的帮助。

标签： ios safari fullscreen openlayers-3

【解决方案1】：

您可以在其他回复中找到一些其他建议：Full screen api HTML5 and Safari (iOS 6)

尤其是使用meta tags:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

还有scrolling the page:

$('body').scrollTop(1);

【讨论】：

【解决方案2】：

我的 iOS 解决方法（我使用的是 OpenLayers 6）是添加一个替代的“PseudoFullScreen”控件来隐藏我的品牌和导航元素，这样当浏览器不支持时，地图至少可以占据整个浏览器区域'不支持全屏 API。这不是真正的全屏，但它使我的地图应用程序在移动小屏幕上可用。

您可能需要根据自己的目的进行调整以更改正文边距/填充和/或切换其他元素。

  /**
   * Copied from ol.control.FullScreen.
   *
   * @return {boolean} Fullscreen is supported by the current platform.
   */
  function isFullScreenSupported() {
      var body = document.body;
      return !!(body.webkitRequestFullscreen ||
          (body.msRequestFullscreen && document.msFullscreenEnabled) ||
          (body.requestFullscreen && document.fullscreenEnabled));
  }

  // Use the default FullScreen control if supported.
  if (isFullScreenSupported()) {
    map.addControl(new ol.control.FullScreen());
  } else {
    
    // Add an "almost full-screen" control that hides/shows the branding and menu.
    // This assumes that the header is in an element with id "header" and the map
    // is in an element with id "map".
    class PseudoFullScreen extends ol.control.FullScreen {

      /**
       * Constructor.
       */
      constructor(opt_options) {
        super(opt_options);
        // Remove the unsupported class that hides the control as we'll do
        // handle FullScreen a different way.
        this.element.className = this.element.className.replace('ol-unsupported', '');
      }

      /**
       * Override full-screen handling to hide/show the branding & navigation.
       */
      handleFullScreen_() {
        $('header').toggle(500, $.proxy(this.handleFullScreenChange_, this));
      }

      /**
       * Override full-screen change handling.
       */
      handleFullScreenChange_() {
        if ($('header').is(':hidden')) {
            this.setClassName_(this.button_, true);
            this.replaceNode(this.labelActiveNode_, this.labelNode_);
        }
        else {
            this.setClassName_(this.button_, false);
            this.replaceNode(this.labelNode_, this.labelActiveNode_);
        }
    
        this.updateMapHeight();
      }

      /**
       * Copied from ol.dom to be usable in this context.
       *
       * @param {Node} newNode Node to replace old node
       * @param {Node} oldNode The node to be replaced
       */
      replaceNode(newNode, oldNode) {
          var parent = oldNode.parentNode;
          if (parent) {
              parent.replaceChild(newNode, oldNode);
          }
      }
      
      /**
       * Update our map height to full window height.
       */
      function updateMapHeight() {
        var new_height = $(window).height() - $('#map .ol-viewport').offset().top - parseInt($("body").css("margin-bottom")) - parseInt($("body").css("padding-bottom"));
        $('#map').height(new_height);
    
        var map = this.getMap();
        if (map) {
          // Notify the map that it should adjust to avoid stretching.
          map.updateSize();
        }
        return new_height;
     }

    }
    map.addControl(new PseudoFullScreen);

  }

【讨论】：